学无先后,达者为师

网站首页 编程语言 正文

toggleRowSelection失效的2个原因

作者:捞起月亮的渔夫~ 更新时间: 2022-07-21 编程语言
背景:
当在含分页的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)
             }
         })
     })
 })

原文链接:https://blog.csdn.net/Centenario_0/article/details/125151259

栏目分类
最近更新