el-table多选回显问题

在开发的过程中遇到，勾选第一页的某个选项 再翻到第二页，然后在翻回去，第一页选中的选择的就不见了，直接上解决办法

在el-table标签的位置放上这个  :row-key="(row) => { return row.id }"

然后在多选的el-table-column标签上这加一个属性 :reserve-selection="true"

然后就可以了

这个是最简单的最快的一种 但是这种不能提前去选中，只有当你自己点击时才能选中且翻页不会丢失，然后下面提供另一种结合的方法 这个可以提前去选中

先按上面的去步骤去操作 然后在el-table上多加一个属性 v-model="selectedRowKeys"

获取提前选中的ID 放到 双向绑定的值中

然后在接口返回中去 执行回显逻辑 最好将操作放在nextTick中（不然可能会因为加载顺序的问题造成我们的回显逻辑失效）

this.$nextTick(()=>{
              const currentIds = this.tdevData.map(row => row.id);
              
              // 2. 通过 filter 函数将已选中的行的 id 保留下来
              console.log(this.selectedRowKeys,'sleKey')
              const selectedIds = this.selectedRowKeys.filter(id => currentIds.includes(id));
                this.tdevData.forEach(row => {
                  if (selectedIds.includes(row.id)) {
                      // 假设表格中每行都有一个名为“checked”的属性
                      this.$refs.multipleTab.toggleRowSelection(row,true);
                      console.log(row,'我复现了框')
                  } 
                }) 


 
            })

筛选出列表中存在需要回显的id

遍历列表数据 如果存在选中的id 就执行回显操作this.$refs.multipleTab.toggleRowSelection(row,true); 它 第一个参数是需要回显的内容 第二个参数是指定复选框的状态的

这样就完成了