Bootstrap

vue3 element-plus el-table表格toggleRowSelection方法选中无效

const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}

以上是element-plus官方的一个选中示例。如果我们新建一个row数据,发现就是勾选不上,延迟执行也不行

let row={
  date: '2016-05-03',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
multipleTableRef.value!.toggleRowSelection(row, undefined)

直到我看了一位博主写的文章,el-table源代码选中的row,是用的tableData的引用,简单说:
不管怎样遍历,toggleRowSelection方法传入的row,都要从表格tableData里取值,类似tableData[0]这样,或者tableData.forEach中的item

如果需要通过接口加载完表格数据,再回显勾选,那还需要写在nextTick函数里边,实例如下:

<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
const table = reactive({
  tableData: [],
  selected:[]//已选数据id
});
const tableRef = ref();
//获取表格数据
const getTable=()=> {
  getTableData(params).then((res) => {
  	table.tableData = res.data?? [];
    // 选中
    nextTick(() => {
      table.tableData.forEach(item => {
        let result = table.selected.find(row => row == item.id);
        if (result) {
          tableRef.value.toggleRowSelection(item, true);
        }
      });
    });
  })
}
</script>
;