开发中会有对表格中进行默认选中的功能,element-plus官方有一个选中示例,如下
const toggleSelection = (rows?: User[]) => {if (rows) {rows.forEach((row) => {multipleTableRef.value!.toggleRowSelection(row, undefined)})} else {multipleTableRef.value!.clearSelection()}
}
如果我们新建一个row数据,发现就是勾选不上,延迟执行也不行
let row={date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',
}
multipleTableRef.value!.toggleRowSelection(row, undefined)
通过查询得知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>