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

學(xué)無先后,達(dá)者為師

網(wǎng)站首頁 編程語言 正文

toggleRowSelection失效的2個原因

作者:撈起月亮的漁夫~ 更新時間: 2022-07-21 編程語言
背景:
當(dāng)在含分頁的table中,需分頁切換后對列表項的勾選狀態(tài)做回顯操作。根據(jù)element文檔使用 this.$refs.mytable.toggleRowSelection(row, selected)方法回顯,實際應(yīng)用時會出現(xiàn)回顯失效的情況。

失效原因:

1、 ref 文檔本身是作為渲染結(jié)果被創(chuàng)建的,在初始渲染的時候你不能訪問它們 - 它們還不存在! $refs 也不是響應(yīng)式的,因此你不應(yīng)該試圖用它在模板中做數(shù)據(jù)綁定。
數(shù)據(jù)更新后Dom會注銷新建,導(dǎo)致我們勾選操作失效

2、我們操作的勾選數(shù)據(jù)必須是表單數(shù)據(jù),即便數(shù)據(jù)一模一樣,數(shù)據(jù)存儲地址的指針不同也會導(dǎo)致失效

解決辦法:

1、使用$nextTick,在dom 更新完成后的回調(diào)中來處理渲染選中
在這里插入圖片描述2、通過已選數(shù)據(jù)對比篩選表單數(shù)據(jù)來操作同一數(shù)據(jù)

 this.checkedData.forEach(item => { // checkedData為已選數(shù)據(jù)
          this.$nextTick( ()=>{
            this.userData.find(obj => { // userData 表單數(shù)據(jù)
              if(item.id === obj.id) {
                this.$refs.multipleTable.toggleRowSelection(obj,true)
             }
         })
     })
 })

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

欄目分類
最近更新