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