vue.js - el-table多选 选中一条数据，其他一样id的也被选中，如何实现？

Question

选中其中一条数据之后，一样id的也被选中，这怎么实现啊

Answer 1

1、selection-change事件可以监听选择框的改变事件，里面的数据是所有已选中的数据，可以通过这个拿到所有已选中的id集合
2、根据上面获取的id集合从table data中筛选出所有相同id的数据
3、遍历上面符合的数据，使用toggleRowSelection(row, true)设置选中状态（可跟第二步的遍历一起进行）

Answer 2

可以通过监听el-table的selection-change事件，并在事件触发时将一样id的数据也选中。具体步骤如下：

1. 在el-table上添加selection-change事件的监听器：

<el-table @selection-change="handleSelectionChange" ... >  ...</el-table>

2. 在methods中定义handleSelectionChange方法，该方法将被触发选中状态发生变化时：

methods: {  handleSelectionChange(selection) {    // 获取当前选中的数据    const selectedData = selection[0];        // 通过数据中的id属性，筛选出与选中数据的id相同的其他数据，并设置选中状态    this.tableData.forEach(item => {      if (item.id === selectedData.id) {        this.$refs.table.toggleRowSelection(item, true);      }    });  }}

其中，tableData为el-table的数据源，$refs.table为el-table的引用，toggleRowSelection方法用于控制数据的选中状态。

这样，当选中一条数据后，与之具有相同id的其他数据也会被选中。