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

在Vue.js或其他前端框架中，实现父组件和子组件之间数据表格选中状态的精准回显，通常涉及到父子组件之间的数据传递和状态管理。以下是一个基于Vue.js的实现思路：

1. 父组件传递数据给子组件

父组件通过props将数据传递给子组件。假设父组件有一个数据表格，并且需要将选中的行数据传递给子组件。

<template>
  <div>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>

    <child-component :selectedRows="selectedRows"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 },
        { id: 3, name: 'Doe', age: 28 }
      ],
      selectedRows: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    }
  }
};
</script>

2. 子组件接收并处理选中数据

子组件通过props接收父组件传递的选中数据，并在子组件中进行处理。

<template>
  <div>
    <h3>Selected Rows:</h3>
    <ul>
      <li v-for="row in selectedRows" :key="row.id">
        {{ row.name }} - {{ row.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    selectedRows: {
      type: Array,
      required: true
    }
  }
};
</script>

3. 精准回显选中状态

为了实现精准回显选中状态，父组件需要在数据更新时同步更新子组件的选中状态。可以通过watch监听selectedRows的变化，并在子组件中根据selectedRows来设置表格的选中状态。

<template>
  <div>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      ref="table"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>

    <child-component :selectedRows="selectedRows"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 },
        { id: 3, name: 'Doe', age: 28 }
      ],
      selectedRows: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    setTableSelection() {
      this.$refs.table.clearSelection();
      this.selectedRows.forEach(row => {
        const foundRow = this.tableData.find(item => item.id === row.id);
        if (foundRow) {
          this.$refs.table.toggleRowSelection(foundRow, true);
        }
      });
    }
  },
  watch: {
    selectedRows: {
      handler() {
        this.setTableSelection();
      },
      deep: true
    }
  },
  mounted() {
    this.setTableSelection();
  }
};
</script>

4. 子组件中的处理

子组件可以根据父组件传递的selectedRows来显示选中的行数据。

<template>
  <div>
    <h3>Selected Rows:</h3>
    <ul>
      <li v-for="row in selectedRows" :key="row.id">
        {{ row.name }} - {{ row.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    selectedRows: {
      type: Array,
      required: true
    }
  }
};
</script>

总结

通过上述步骤，父组件和子组件之间可以实现数据表格选中状态的精准回显。父组件通过props将选中的行数据传递给子组件，子组件根据这些数据来显示选中的行。同时，父组件通过监听selectedRows的变化来同步更新表格的选中状态，确保选中状态的精准回显。