解決獲取數(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)文章
我們平時經(jīng)常做的是上傳文件,下面這篇文章主要給大家介紹了關(guān)于vue項目中實現(xiàn)多文件上傳功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue實現(xiàn)一個單獨的組件注釋，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3深入學(xué)習(xí)?nextTick和historyApiFallback
這篇文章主要介紹了vue3深入學(xué)習(xí)?nextTick和historyApiFallback，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能示例
這篇文章主要介紹了vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能,結(jié)合實例形式分析了vue.js針對本地json數(shù)據(jù)的讀取、遍歷輸出相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
axios的封裝和api接口的統(tǒng)一管理，其實主要目的就是在幫助我們簡化代碼和利于后期的更新維護(hù)，在vue項目中，和后臺交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫，本文就給大家介紹一下axios封裝與api接口封裝管理,需要的朋友可以參考下2023-06-06
vue3.0 的 Composition API 的使用示例
這篇文章主要介紹了vue3.0 的 Composition API 的使用示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
本文主要介紹了Javascript中Vuex的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
在Vue和Django進(jìn)行前后分離開發(fā)時,經(jīng)常會遇到跨域和CSRF令牌驗證問題,本文詳細(xì)介紹了如何在Django后端設(shè)置視圖獲取CSRF令牌,并在Vue前端進(jìn)行配置以確保安全的數(shù)據(jù)交互,文章提供了后端視圖創(chuàng)建、settings配置以及前端axios請求封裝的具體方法2024-09-09
這篇文章介紹了Vue使用$set和$delete操作對象屬性的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟
這篇文章主要給大家介紹了關(guān)于vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用vue-cli具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10