如何解决获取数据后this.$refs.xxx.toggleRowSelection方法不起作用的问题？

本文共计544个文字，预计阅读时间需要3分钟。

目录 + 获取数据后this.$refs.xxx.toggleRowSelection无效 + toggleRowSelection失效的2个原因 + 背景及原因 + 解决方法 + 获取数据后this.$refs.xxx.toggleRowSelection无效 + 获取数据后在外部加上一个$nextTick即可

目录

• 获取数据后this.$refs.xxx.toggleRowSelection无效
• toggleRowSelection失效的2个原因
• 背景
• 失效原因
• 解决办法

获取数据后this.$refs.xxx.toggleRowSelection无效

获取数据后在外部加上一个$nextTick即可

this.$nextTick(function () {   this.trainPeopleTable.forEach(row=>{     if(this.selectList.indexOf(row.staffId) >= 0){       this.$refs.trainPersonTable.toggleRowSelection(row);     }   }) })

原因大概如下：

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

toggleRowSelection失效的2个原因

背景

当在含分页的table中，需分页切换后对列表项的勾选状态做回显操作。根据element文档使用 this.$refs.mytable.toggleRowSelection（row, selected）方法回显，实际应用时会出现回显失效的情况。

失效原因

1、 ref 文档本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！ $refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

数据更新后Dom会注销新建，导致我们勾选操作失效

2、我们操作的勾选数据必须是表单数据，即便数据一模一样，数据存储地址的指针不同也会导致失效

解决办法

1、使用$nextTick,在dom 更新完成后的回调中来处理渲染选中

2、通过已选数据对比筛选表单数据来操作同一数据

this.checkedData.forEach(item => { // checkedData为已选数据 this.$nextTick( ()=>{ this.userData.find(obj => { // userData 表单数据 if(item.id === obj.id) { this.$refs.multipleTable.toggleRowSelection(obj,true) } }) }) })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。