vue项目 element 中 el-table 复选框默认选中事件

官网上有说明如何使用复选框,但是说的不详细,今天项目上用到了,el-table 标签初始化默认加载选中的问题,

网上找了好多文章,大多是说使用这段代码,

this.$refs.multipleTable.toggleRowSelection(row);

但是在使用过程中一直报错

小白的我就不太清楚具体意思了

最后总结记录一下,防止后期忘记:

示例:

1:根据官网示例,创建表格,并自定义表格名称,ps:  后面会用到

vue项目 element 中 el-table 复选框默认选中事件_第1张图片

2:如果是通过点击事件弹出的表格则,应该在vue 的 methods 中定义方法处理,具体如下

vue项目 element 中 el-table 复选框默认选中事件_第2张图片

3:上面的 this.$refs.multipleTable.toggleRowSelection(row); 必须要放在 this.$nextTick(()=>{})中才可以执行(啥意思,俺就不知道了)

4:在指定的表格上经行操作一定要加上[0] ,一定要加上[0],一定要加上[0],不然会一直报错

5:实列代码如下:

前端代码如下:

js 代码

this.$nextTick(()=>{
	this.tableData.forEach(row => {
	  fdList.some(item=>{
		if(item.name == row.name){
			this.$refs.multipleTable[0].toggleRowSelection(row,true);
		}
	  })
	})
})

说明:

js代码中的 tableData 为自定义的数组,在判断完成后只要this.$refs.multipleTable[0].toggleRowSelection(row,true); 即可

特别鸣谢:

https://blog.csdn.net/u010007013/article/details/97828405 

https://blog.csdn.net/qq_42345108/article/details/105838439

 

 

你可能感兴趣的:(vue,vue,elementui,html,js)