欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

獲取數(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)在含分頁(yè)的table中，需分頁(yè)切換后對(duì)列表項(xiàng)的勾選狀態(tài)做回顯操作。根據(jù)element文檔使用 this.$refs.mytable.toggleRowSelection（row, selected）方法回顯，實(shí)際應(yīng)用時(shí)會(huì)出現(xiàn)回顯失效的情況。

失效原因

1、 ref 文檔本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時(shí)候你不能訪問(wèn)它們 - 它們還不存在！ $refs 也不是響應(yīng)式的，因此你不應(yīng)該試圖用它在模板中做數(shù)據(jù)綁定。

數(shù)據(jù)更新后Dom會(huì)注銷(xiāo)新建，導(dǎo)致我們勾選操作失效

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

解決辦法

1、使用$nextTick,在dom 更新完成后的回調(diào)中來(lái)處理渲染選中

2、通過(guò)已選數(shù)據(jù)對(duì)比篩選表單數(shù)據(jù)來(lái)操作同一數(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)文章

最新評(píng)論