日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

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

欄目分類
最近更新