toggleRowSelection 失效原因及解决思路
当在含分页的table中,需分页切换后对列表项的勾选状态做回显操作。根据element文档使用this.$refs.mytable.toggleRowSelection(row, selected)方法回显,实际应用时会出现回显失效的情况。
·
背景:
当在含分页的table中,需分页切换后对列表项的勾选状态做回显操作。根据element文档使用this.$refs.mytable.toggleRowSelection(row, selected)
方法回显,实际应用时会出现回显失效的情况。
失效原因:
1、 ref 文档本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在! $refs
也不是响应式的,因此你不应该试图用它在模板中做数据绑定。
数据更新后Dom会注销新建,导致我们勾选操作失效
2、我们操作的勾选数据必须是表单源数据,即便数据一模一样,数据存储地址的指针不同也会导致失效
解决办法:
1、使用 $nextTick
,目的是为了可以获取到更新后的DOM
由于Vue视图更新是异步的,即修改数据,视图不会立即更新,而是会监听数据变化,并缓存在同一个事件循环只中,等同一数据循环中的所有数据变化完成后,再进行视图更新,为了获取到更新后的DOM,所以设置Vue.nextTick(),就是为了在下次DOM更新循环结束后执行延迟回调。
2、数据唯一性处理
-
通过深拷贝方法,拷贝一份源表单数据
- 扩展运算符
- JSON 序列化
- 递归拷贝
-
通过对比筛选找到源数据
this.checkedData.forEach(item => { // checkedData为已选数据
this.$nextTick( ()=>{
this.userData.find(obj => { // userData 表单数据
if(item.id === obj.id) {
this.$refs.multipleTable.toggleRowSelection(obj,true)
}
})
})
})
更多推荐
已为社区贡献1条内容
所有评论(0)