element-plus中table多选实现

1、2、在封装的table组件中，

<el-table
    v-loading="loading"
    :data="tableData"
    v-bind="{ ...cfgProps }"
    :header-cell-style="{ height: 'var(--zn-table-header-height)', background: '#f5f5f5' }"
    :row-style="{ height: 'var(--zn-table-header-height)', border: 'none' }"
    :stripe="true"
    :height="height"
    :empty-text="emptyText"
    @row-click="onRowClick"
    @selection-change="handleSelectionChange"
    ref="multipleTableRef"
  >
</el-table>

<script setup lang="ts">
const multipleTableRef = ref(null)
const toggleRowSelection = (val) => {
  multipleTableRef.value.toggleRowSelection(val, true)
}

defineExpose({
  toggleRowSelection
})
</script>

3、关于使用toggleRowSelection勾选无效的问题：

a. 需要在下次DOM更新循环结束之后执行。

b. 通过从所有列表中找到需要选中的项来帮助选中，直接使用选中列表来设置会出错。

const setInitSelectKeys = async () => {
  await nextTick()
  props.initChecked.forEach((id) => {
    const item = recordList.value.find((n) => n.cultivationSubjectId === id)
    tableRef.value.toggleRowSelection(item)
  })
}