elementUI表格多選框this.$refs.xxx.toggleRowSelection無效問題
更新時間：2023年11月17日 14:58:37 作者：鑰零零
這篇文章主要介紹了elementUI表格多選框this.$refs.xxx.toggleRowSelection無效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
this.$refs.xxx.toggleRowSelection無效
在elementUI官方實例中，multipleSelection代表選中的值，toggleRowSelection(row,selection)方法用于原先已選的值傳入進行勾選，row傳遞被勾選行的數(shù)據(jù)，selected設置是否選中。
需求是每次打開彈窗都會重新獲取表格數(shù)據(jù)，并且要選中對應的數(shù)據(jù)，但直接使用那個方法并沒有效果，因為表格中的數(shù)據(jù)還沒有請求出來。
解決
第一步獲取數(shù)據(jù)后在需要進行勾選操作的外面套一個$nextTick（并沒完全實現(xiàn)）
this.$nextTick(() => {
checkedList.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row,true);
});
});
$nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM。
但這樣任然無法正常顯示
解決：
這里通過從所有列表tableData中找到需要選中的項來幫助選中，直接使用選中列表來設置會出錯
最終代碼
this.$nextTick(() => {
checkedLi.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(
this.list.find((item) => {
return row.FIELD_CODE == item.FIELD_CODE;
}),
true
);
});
});
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了如何在Vue項目中使用vuex問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了Vue+penlayers實現(xiàn)多邊形繪制及展示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了vue利用axios來完成數(shù)據(jù)的交互,本文通過實例代碼給大家講解數(shù)據(jù)交互方法及安裝方法,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了詳解mpvue小程序中怎么引入iconfont字體圖標，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家詳細介紹了第一個Vue插件從封裝到發(fā)布的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。這篇文章主要介紹了vuex與組件聯(lián)合使用的方法,需要的朋友可以參考下2018-05-05
vue轉(zhuǎn)react useEffect的全過程
這篇文章主要介紹了vue轉(zhuǎn)react useEffect的全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Element Rate 評分的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
vue?el-table中使用el-select選中后無效的解決
這篇文章主要介紹了vue?el-table中使用el-select選中后無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
完美解決element-ui的el-input設置number類型后的相關問題
這篇文章主要介紹了完美解決element-ui的el-input設置number類型后的相關問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10