el-table初始化时根据传入数据选中某些行

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

原文地址：https://blog.csdn.net/weixin_44580139/article/details/142628246

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！