el-table多選toggleRowSelection不生效解決方案
做彈窗里有個(gè)表格多選時(shí)，經(jīng)常遇到再次打開(kāi)彈窗， 已選值賦值不上 的問(wèn)題，這里簡(jiǎn)單記錄一下解決方案。
element官方提供的例子經(jīng)常是有各種問(wèn)題的，這里經(jīng)常是toggleSelection不生效
toggleRowSelection是用來(lái)控制table表格選擇框回顯的方法，這個(gè)方法有兩個(gè)參數(shù)
toggleRowSelection(item, true)，第一個(gè)參數(shù)是你準(zhǔn)備 回顯哪一項(xiàng) ，也就是表格對(duì)應(yīng)的哪一行，第二個(gè)就是那個(gè)勾勾，true就是 勾選 上。
一般遇到的業(yè)務(wù)是，第一次打開(kāi)選中了，然后有個(gè)列表回顯選中的值，再有個(gè)編輯，點(diǎn)編輯回顯選中的，然后就會(huì)遇到選中不生效的問(wèn)題…
直接上解決方案：
1、賦值前先清空值clearSelection()
2、在DOM節(jié)點(diǎn)更新后再進(jìn)行賦值，這里使用nextTick
3、進(jìn)行賦值渲染選中toggleRowSelection(item, true)
// 我這里是用的el-dialog彈窗里的，所以在@open事件中處理
onOpen () {
const TABLE_DOM = this.$refs.multipleTable
const { optCoupons } = this
if (TABLE_DOM) {
TABLE_DOM.clearSelection()
this.$nextTick(_ => {
optCoupons.forEach(item => {
TABLE_DOM.toggleRowSelection(item, true)
})
})
}
}總結(jié)
到此這篇關(guān)于el-table多選toggleRowSelection不生效解決方案的文章就介紹到這了,更多相關(guān)el-table多選toggleRowSelection不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue + Element UI圖片上傳控件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
Vue如何優(yōu)雅處理Token過(guò)期并自動(dòng)續(xù)期
干了6年前端,和Token斗智斗勇了不知道多少回,本文小編就跟大家聊聊如何優(yōu)雅處理Token過(guò)期,甚至讓它自動(dòng)續(xù)期,讓用戶無(wú)感知,有需要的小伙伴可以了解下2025-07-07
這篇文章主要給大家介紹了vue獲取DOM節(jié)點(diǎn)的常用方法,使用ref屬性,使用$el屬性,使用querySelector和querySelectorAll,使用$refs和querySelector,這幾種方法,需要的朋友可以參考下2023-10-10
如何基于vue-cli3.0構(gòu)建功能完善的移動(dòng)端架子
這篇文章主要介紹了基于vue-cli3.0構(gòu)建功能完善的移動(dòng)端架子，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
實(shí)現(xiàn)小游戲可以鍛煉自己的邏輯思維能力，也不會(huì)很枯燥，完成時(shí)會(huì)給自己帶來(lái)一種滿足感。本文就將利用Vue和JS實(shí)現(xiàn)簡(jiǎn)單的掃雷小游戲，需要的可以參考一下2022-06-06
如何為vuex實(shí)現(xiàn)帶參數(shù)的 getter和state.commit
這篇文章主要介紹了如何為vuex實(shí)現(xiàn)帶參數(shù)的getter和state.commit，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
這篇文章主要介紹了Vue項(xiàng)目配置@別名全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue中tab欄切換的簡(jiǎn)單實(shí)現(xiàn)
本文主要介紹了Vue中tab欄切換的簡(jiǎn)單實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue-cli監(jiān)聽(tīng)組件加載完成的方法
今天小編就為大家分享一篇vue-cli監(jiān)聽(tīng)組件加載完成的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue微信分享出來(lái)的鏈接點(diǎn)開(kāi)是首頁(yè)問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了vue微信分享出來(lái)的鏈接點(diǎn)開(kāi)是首頁(yè)問(wèn)題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11