開發中會有對表格中進行默認選中的功能,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>