解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題
獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效
獲取數(shù)據(jù)后在外部加上一個$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個原因
背景
當(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)
}
})
})
})
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue3學(xué)習(xí)筆記之自定義組件的相關(guān)資料,組件系統(tǒng)是Vue.js其中一個重要的概念,它提供了一種抽象,讓我們可以使用獨立可復(fù)用的小組件來構(gòu)建大型應(yīng)用,需要的朋友可以參考下2023-08-08
今天小編就為大家分享一篇Vue-component全局注冊實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue實現(xiàn)圖片預(yù)覽放大以及縮小問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
關(guān)于Vue在ie10下空白頁的debug小結(jié)
這篇文章主要給大家介紹了關(guān)于Vue在ie10下空白頁的debug相關(guān)資料，這是最近在工作中遇到的一個問題，通過查找相關(guān)的資料終于解決了，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
這篇文章主要為大家學(xué)習(xí)介紹了Vue如何利用廣度優(yōu)先搜索實現(xiàn)watch（有意思），文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
vue項目中使用Hbuilder打包app 設(shè)置沉浸式狀態(tài)欄的方法
這篇文章主要介紹了vue項目 使用Hbuilder打包app 設(shè)置沉浸式狀態(tài)欄的方法，本文通過實例代碼效果圖展示給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
vue雙向錨點實現(xiàn)過程簡易版(scrollIntoView)
這篇文章主要介紹了vue雙向錨點實現(xiàn)過程簡易版(scrollIntoView),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家介紹了Vue配置環(huán)境變量，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要介紹了VUE表格顯示錯位的兩種解決思路,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue自定義js圖片碎片輪播圖切換效果的實現(xiàn)代碼
這篇文章主要介紹了vue自定義js圖片碎片輪播圖切換效果的實現(xiàn)代碼,需要的朋友可以參考下2019-04-04