element 表格toggleRowSelection 回显勾选及选中数量问题

最新推荐文章于 2025-03-23 18:39:37 发布

Z.Y.

最新推荐文章于 2025-03-23 18:39:37 发布

阅读量5k

点赞数 9

文章标签： javascript 前端 elementui vue

本文链接：https://blog.csdn.net/weixin_43162845/article/details/130638413

版权

文章讲述了在Vue项目中使用el-table组件时遇到的选中行回显问题。通过$nextTick确保DOM更新后调用toggleRowSelection方法，以及使用row-key和reserve-selection属性来保留选中状态。当数据未改变时，通过对比ID来正确设置选中行。另外，清除选中项可以在离开页面时执行，以避免选中数量重复。

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

首先在使用toggleRowSelection的前面加nextTick

 this.$nextTick(() => {
		this.$refs.multipleTable.toggleRowSelection(element);
   });

遇到的问题：

回显勾选一两秒之后，勾选又取消了

在这里插入图片描述

应该默认勾选一条数据，之后手动勾选了一条数据，@selection-change方法控制台打印出来是两条数据，但是界面上没有回显成功


this.$nextTick(() => {
	data.forEach((row) => {
	     this.$refs.multipleTable.toggleRowSelection(row);
	});
});

原因是 data数据是我之前选中的行数据，数据没有改变。fileList是表格的所有数据，按下面这种写法就可以解决

解决方法一

  this.$nextTick(() => {
	  this.fileList.forEach((element) => {
	     data.forEach((row) => {
	       if (element.id == row.id) {
	         this.$refs.multipleTable.toggleRowSelection(element);
	       }
	     });
	   });
   });

解决方法二

el-table中加入row-key，type="selection"中加入:reserve-selection=“true”，reserve-selection为 true 则会在数据更新之后保留之前选中的数据

<el-table
   ref="multipleTable"
  :data="fileList"
  @selection-change="handleSelect"
  row-key="id"
>
  <el-table-column
    type="selection"
    width="55"
    :reserve-selection="true"
  >


this.$nextTick(() => {
	data.forEach((row) => {
	     this.$refs.multipleTable.toggleRowSelection(row);
	});
});

这样就可以直接用data数据
但这种方法也有一个问题，就是选中的数量会重复
在这里插入图片描述

解决方法是在离开table所在的页面时，清空选中项

 this.$nextTick(() => {
     this.$refs.multipleTable.clearSelection();
});