toggleRowSelection 失效原因及解决思路

背景：
当在含分页的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)}})})})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！