el-table初始化时根据传入数据选中某些行
// 父组件
const mockTableData = ref<TableData[]>([
{
key: '111',
value: 'Tom111',
description: 'No. 189, Grove St, Los Angeles',
selected: true,
}
]);
# 子组件
<el-table
:data="TableData"
border
class="edit-table"
ref="editTableRef"
>
<el-table-column type="selection" :selectable="selectable" width="55" />
<el-table-column label="key" width="120">
<template #default="scope">{{ scope.row.key}}</template>
</el-table-column>
// 其他列省略
</el-table>
const selectable = (row: any) => {
return !isEmpty(row);
};
onMounted(() => {
props.TableData.forEach((row) => {
editTableRef.value.toggleRowSelection(row, row?.selected || false);
});
});
参考:
https://element-plus.org/zh-CN/component/table.html#%E5%A4%9A%E9%80%89