<template><el-table:data="tableData"style="width: 100%"ref="multipleTable"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><!-- 其他列 --></el-table>
</template><script>
export default {data() {return {tableData: [], // 表格数据selectedRows: [], // 已选行id数组};},methods: {// 数据初始加载后,可以根据已选行id数组回显复选框loadTableData() {// 模拟从API获取数据this.tableData = [// ...获取到的数据];// 回显复选框this.tableData.forEach(row => {if (this.selectedRows.includes(row.id)) {this.$refs.multipleTable.toggleRowSelection(row, true);}});},handleSelectionChange(selection) {// 当复选框选项变化时更新已选行id数组this.selectedRows = selection.map(item => item.id);},},mounted() {this.loadTableData();},
};
</script>
方法二
//vue3写法
import { ref, reactive, defineProps, defineEmits, nextTick } from 'vue'const multipleTable = ref(null)
const comonArr = ref([])
nextTick(() => {comonArr.value.forEach((row) => {const row = tableData.find((f) => f.id = row)multipleTable.toggleRowSelection(row, true);});
})