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>