亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題

 更新時(shí)間：2022年10月21日 10:35:43   作者：前端開發(fā)終生學(xué)習(xí)者  
這篇文章主要介紹了解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效

獲取數(shù)據(jù)后在外部加上一個(gè)$nextTick即可

this.$nextTick(function () {
? this.trainPeopleTable.forEach(row=>{
? ? if(this.selectList.indexOf(row.staffId) >= 0){
? ? ? this.$refs.trainPersonTable.toggleRowSelection(row);
? ? }
? })
})

原因大概如下：

$nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM 

toggleRowSelection失效的2個(gè)原因

背景

當(dāng)在含分頁的table中，需分頁切換后對列表項(xiàng)的勾選狀態(tài)做回顯操作。根據(jù)element文檔使用 this.$refs.mytable.toggleRowSelection（row, selected）方法回顯，實(shí)際應(yīng)用時(shí)會出現(xiàn)回顯失效的情況。

失效原因

1、 ref 文檔本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時(shí)候你不能訪問它們 - 它們還不存在！ $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)
             }
         })
     })
 })

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論