解決獲取數據后this.$refs.xxx.toggleRowSelection無效的問題
更新時間：2022年10月21日 10:35:43 作者：前端開發(fā)終生學習者
這篇文章主要介紹了解決獲取數據后this.$refs.xxx.toggleRowSelection無效的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
獲取數據后this.$refs.xxx.toggleRowSelection無效
獲取數據后在外部加上一個$nextTick即可
this.$nextTick(function () {
? this.trainPeopleTable.forEach(row=>{
? ? if(this.selectList.indexOf(row.staffId) >= 0){
? ? ? this.$refs.trainPersonTable.toggleRowSelection(row);
? ? }
? })
})原因大概如下：
$nextTick 是在下次 DOM 更新循環(huán)結束之后執(zhí)行延遲回調，在修改數據之后使用 $nextTick，則可以在回調中獲取更新后的 DOM
toggleRowSelection失效的2個原因
背景
當在含分頁的table中，需分頁切換后對列表項的勾選狀態(tài)做回顯操作。根據element文檔使用 this.$refs.mytable.toggleRowSelection（row, selected）方法回顯，實際應用時會出現(xiàn)回顯失效的情況。
失效原因
1、 ref 文檔本身是作為渲染結果被創(chuàng)建的，在初始渲染的時候你不能訪問它們 - 它們還不存在！ $refs 也不是響應式的，因此你不應該試圖用它在模板中做數據綁定。
數據更新后Dom會注銷新建，導致我們勾選操作失效
2、我們操作的勾選數據必須是表單數據，即便數據一模一樣，數據存儲地址的指針不同也會導致失效
解決辦法
1、使用$nextTick,在dom 更新完成后的回調中來處理渲染選中
2、通過已選數據對比篩選表單數據來操作同一數據
this.checkedData.forEach(item => { // checkedData為已選數據
this.$nextTick( ()=>{
this.userData.find(obj => { // userData 表單數據
if(item.id === obj.id) {
this.$refs.multipleTable.toggleRowSelection(obj,true)
}
})
})
})
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于vue3學習筆記之自定義組件的相關資料,組件系統(tǒng)是Vue.js其中一個重要的概念,它提供了一種抽象,讓我們可以使用獨立可復用的小組件來構建大型應用,需要的朋友可以參考下2023-08-08
今天小編就為大家分享一篇Vue-component全局注冊實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue實現(xiàn)圖片預覽放大以及縮小問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要給大家介紹了關于Vue在ie10下空白頁的debug相關資料，這是最近在工作中遇到的一個問題，通過查找相關的資料終于解決了，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-05-05
這篇文章主要為大家學習介紹了Vue如何利用廣度優(yōu)先搜索實現(xiàn)watch（有意思），文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-08-08
vue項目中使用Hbuilder打包app 設置沉浸式狀態(tài)欄的方法
這篇文章主要介紹了vue項目 使用Hbuilder打包app 設置沉浸式狀態(tài)欄的方法，本文通過實例代碼效果圖展示給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下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