父组件和子组件数据表格ID不同，如何实现选中状态的回显？

在Vue.js或React等前端框架中，父组件和子组件之间的数据通信是一个常见的需求。如果父组件和子组件的数据表格ID不同，但需要实现选中状态的回显，可以通过以下步骤来实现：

1. 父组件传递选中状态

父组件需要将选中的ID传递给子组件。可以通过props或事件来实现。

Vue.js 示例：

<template>
  <div>
    <ChildComponent :selectedIds="selectedIds" @update-selected="handleUpdateSelected" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      selectedIds: [] // 父组件中的选中ID
    };
  },
  methods: {
    handleUpdateSelected(ids) {
      this.selectedIds = ids;
    }
  }
};
</script>

React 示例：

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [selectedIds, setSelectedIds] = useState([]);

  const handleUpdateSelected = (ids) => {
    setSelectedIds(ids);
  };

  return (
    <div>
      <ChildComponent selectedIds={selectedIds} onUpdateSelected={handleUpdateSelected} />
    </div>
  );
}

export default ParentComponent;

2. 子组件接收选中状态并回显

子组件需要接收父组件传递的选中状态，并根据这些状态来设置表格的选中状态。

Vue.js 示例：

<template>
  <div>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td>
          <input
            type="checkbox"
            :checked="isSelected(item.id)"
            @change="handleCheckboxChange(item.id)"
          />
        </td>
        <td>{{ item.name }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    selectedIds: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    isSelected(id) {
      return this.selectedIds.includes(id);
    },
    handleCheckboxChange(id) {
      const selectedIds = [...this.selectedIds];
      const index = selectedIds.indexOf(id);
      if (index === -1) {
        selectedIds.push(id);
      } else {
        selectedIds.splice(index, 1);
      }
      this.$emit('update-selected', selectedIds);
    }
  }
};
</script>

React 示例：

import React from 'react';

function ChildComponent({ selectedIds, onUpdateSelected }) {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  const isSelected = (id) => selectedIds.includes(id);

  const handleCheckboxChange = (id) => {
    const newSelectedIds = selectedIds.includes(id)
      ? selectedIds.filter((selectedId) => selectedId !== id)
      : [...selectedIds, id];
    onUpdateSelected(newSelectedIds);
  };

  return (
    <div>
      <table>
        <tbody>
          {items.map((item) => (
            <tr key={item.id}>
              <td>
                <input
                  type="checkbox"
                  checked={isSelected(item.id)}
                  onChange={() => handleCheckboxChange(item.id)}
                />
              </td>
              <td>{item.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default ChildComponent;

3. 处理ID不同的情况

如果父组件和子组件的ID不同，可以在子组件中进行ID的映射或转换。例如，子组件可以维护一个映射表，将父组件的ID转换为子组件的ID。

Vue.js 示例：

<template>
  <div>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td>
          <input
            type="checkbox"
            :checked="isSelected(item.id)"
            @change="handleCheckboxChange(item.id)"
          />
        </td>
        <td>{{ item.name }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    selectedIds: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      items: [
        { id: 101, name: 'Item 1' },
        { id: 102, name: 'Item 2' },
        { id: 103, name: 'Item 3' }
      ],
      idMapping: {
        1: 101,
        2: 102,
        3: 103
      }
    };
  },
  methods: {
    isSelected(id) {
      const parentId = this.getParentId(id);
      return this.selectedIds.includes(parentId);
    },
    handleCheckboxChange(id) {
      const parentId = this.getParentId(id);
      const selectedIds = [...this.selectedIds];
      const index = selectedIds.indexOf(parentId);
      if (index === -1) {
        selectedIds.push(parentId);
      } else {
        selectedIds.splice(index, 1);
      }
      this.$emit('update-selected', selectedIds);
    },
    getParentId(childId) {
      return Object.keys(this.idMapping).find(key => this.idMapping[key] === childId);
    }
  }
};
</script>

React 示例：

import React from 'react';

function ChildComponent({ selectedIds, onUpdateSelected }) {
  const items = [
    { id: 101, name: 'Item 1' },
    { id: 102, name: 'Item 2' },
    { id: 103, name: 'Item 3' }
  ];

  const idMapping = {
    1: 101,
    2: 102,
    3: 103
  };

  const getParentId = (childId) => {
    return Object.keys(idMapping).find((key) => idMapping[key] === childId);
  };

  const isSelected = (id) => {
    const parentId = getParentId(id);
    return selectedIds.includes(Number(parentId));
  };

  const handleCheckboxChange = (id) => {
    const parentId = getParentId(id);
    const newSelectedIds = selectedIds.includes(Number(parentId))
      ? selectedIds.filter((selectedId) => selectedId !== Number(parentId))
      : [...selectedIds, Number(parentId)];
    onUpdateSelected(newSelectedIds);
  };

  return (
    <div>
      <table>
        <tbody>
          {items.map((item) => (
            <tr key={item.id}>
              <td>
                <input
                  type="checkbox"
                  checked={isSelected(item.id)}
                  onChange={() => handleCheckboxChange(item.id)}
                />
              </td>
              <td>{item.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default ChildComponent;

总结

通过上述步骤，你可以实现父组件和子组件之间选中状态的回显，即使它们的ID不同。关键在于通过props传递选中状态，并在子组件中进行ID的映射或转换。