父组件子组件数据表格选中状态如何精准回显？

在Vue.js或其他前端框架中，父组件和子组件之间的数据通信是一个常见的需求。特别是在处理数据表格的选中状态时，如何精准地回显选中状态是一个关键问题。以下是一个通用的解决方案，适用于Vue.js框架。

1. 父组件传递选中状态给子组件

父组件可以通过props将选中状态传递给子组件。子组件接收到这些状态后，可以根据这些状态来设置表格的选中状态。

父组件代码示例

<template>
  <div>
    <ChildComponent :selectedRows="selectedRows" @update-selection="handleSelectionChange" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      selectedRows: [] // 父组件维护的选中状态
    };
  },
  methods: {
    handleSelectionChange(selectedRows) {
      this.selectedRows = selectedRows;
    }
  }
};
</script>

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

子组件通过props接收父组件传递的选中状态，并在表格中回显这些选中状态。

子组件代码示例

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    ref="table"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  props: {
    selectedRows: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [
        // 表格数据
      ]
    };
  },
  watch: {
    selectedRows: {
      handler(newVal) {
        this.$nextTick(() => {
          this.toggleRowSelection(newVal);
        });
      },
      immediate: true
    }
  },
  methods: {
    handleSelectionChange(selection) {
      this.$emit('update-selection', selection);
    },
    toggleRowSelection(rows) {
      rows.forEach(row => {
        const foundRow = this.tableData.find(item => item.id === row.id);
        if (foundRow) {
          this.$refs.table.toggleRowSelection(foundRow, true);
        }
      });
    }
  }
};
</script>

3. 关键点解释

• props传递选中状态：父组件通过props将选中的行数据传递给子组件。
• watch监听选中状态：子组件通过watch监听selectedRows的变化，并在变化时调用toggleRowSelection方法来更新表格的选中状态。
• toggleRowSelection方法：该方法用于根据传入的选中状态，动态设置表格的选中行。

4. 注意事项

• 数据一致性：确保父组件和子组件中的数据格式一致，特别是id或其他唯一标识符。
• 异步更新：在Vue.js中，DOM更新是异步的，因此需要使用this.$nextTick来确保DOM更新完成后再进行操作。

通过以上步骤，你可以实现父组件和子组件之间数据表格选中状态的精准回显。