element-plus中table多选实现

最新推荐文章于 2025-05-12 16:45:32 发布

c_reshape

最新推荐文章于 2025-05-12 16:45:32 发布

阅读量795

点赞数 1

文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/weixin_45346457/article/details/137458888

版权

本文介绍了如何在Vue项目中封装el-table组件，并讨论了如何正确使用toggleRowSelection方法进行行选择。特别提到，勾选操作需确保在DOM更新循环结束后执行，以及避免直接用初始选中列表设置时可能出现的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
  })
}