vue3 element-plus el-table表格toggleRowSelection方法选中无效

最新推荐文章于 2026-04-10 10:50:19 发布

原创最新推荐文章于 2026-04-10 10:50:19 发布 · 6.3k 阅读 ·

大模型引用 1 次

本内容遵循CC 4.0 BY-SA版权协议

林深灼华

关注

标签

#vue.js #javascript #elementui

分类前端开发

文章讲述了在Element-Plus中使用el-table时遇到的选中问题，即新添加的row无法被正确选中。解决方法是确保toggleRowSelection方法传入的是tableData中的引用，且在接口获取数据后需用nextTick确保数据更新后再处理选中逻辑。

const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}

以上是element-plus官方的一个选中示例。如果我们新建一个row数据，发现就是勾选不上，延迟执行也不行

let row={
  date: '2016-05-03',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
multipleTableRef.value!.toggleRowSelection(row, undefined)

直到我看了一位博主写的文章，el-table源代码选中的row，是用的tableData的引用，简单说：
不管怎样遍历，toggleRowSelection方法传入的row，都要从表格tableData里取值，类似tableData[0]这样，或者tableData.forEach中的item

如果需要通过接口加载完表格数据，再回显勾选，那还需要写在nextTick函数里边，实例如下：

<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
const table = reactive({
  tableData: [],
  selected:[]//已选数据id
});
const tableRef = ref();
//获取表格数据
const getTable=()=> {
  getTableData(params).then((res) => {
  	table.tableData = res.data?? [];
    // 选中
    nextTick(() => {
      table.tableData.forEach(item => {
        let result = table.selected.find(row => row == item.id);
        if (result) {
          tableRef.value.toggleRowSelection(item, true);
        }
      });
    });
  })
}
</script>