el-table多選toggleRowSelection不生效解決方案
做彈窗里有個(gè)表格多選時(shí)，經(jīng)常遇到再次打開彈窗， 已選值賦值不上 的問題，這里簡(jiǎn)單記錄一下解決方案。
element官方提供的例子經(jīng)常是有各種問題的，這里經(jīng)常是toggleSelection不生效
toggleRowSelection是用來控制table表格選擇框回顯的方法，這個(gè)方法有兩個(gè)參數(shù)
toggleRowSelection(item, true)，第一個(gè)參數(shù)是你準(zhǔn)備 回顯哪一項(xiàng) ，也就是表格對(duì)應(yīng)的哪一行，第二個(gè)就是那個(gè)勾勾，true就是 勾選 上。
一般遇到的業(yè)務(wù)是，第一次打開選中了，然后有個(gè)列表回顯選中的值，再有個(gè)編輯，點(diǎn)編輯回顯選中的，然后就會(huì)遇到選中不生效的問題…
直接上解決方案：
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)文章
這篇文章主要介紹了Vue中watchEffect的追蹤邏輯,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理
本文主要介紹了Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
今天小編就為大家分享一篇element UI upload組件上傳附件格式限制方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
關(guān)于移動(dòng)端與大屏幕自適應(yīng)適配方案
這篇文章主要介紹了關(guān)于移動(dòng)端與大屏幕自適應(yīng)適配方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
放大鏡效果在很多購物網(wǎng)站都可以看到，本文主要介紹了vue3實(shí)現(xiàn)淘寶放大鏡效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue實(shí)現(xiàn)搜索關(guān)鍵詞高亮的詳細(xì)教程
這篇文章主要為大家介紹了vue實(shí)現(xiàn)搜索關(guān)鍵詞高亮的詳細(xì)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
本文主要介紹了vue中v-if失效原因及解決方法,一般v-if失效都是和綁定變量有關(guān),下面就來具體介紹一下,感興趣的可以了解一下2023-09-09
在遇到chunk-vendors.js文件的語法錯(cuò)誤時(shí),可以嘗試在vue.config.js文件中添加transpileDependencies參數(shù)進(jìn)行配置,這通過明確指示哪些依賴需要被babel轉(zhuǎn)譯,從而幫助解決編譯過程中的語法問題,此方法適用于Vue項(xiàng)目中遇到的相關(guān)錯(cuò)誤,希望能幫助到遇到同樣問題的開發(fā)者2024-10-10
基于 flexible 的 Vue 組件：Toast -- 顯示框效果
這篇文章主要介紹了基于 flexible 的 Vue 組件：Toast -- 顯示框效果,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了Vue?瀏覽器本地存儲(chǔ),LocalStorage 和 SessionStorage 統(tǒng)稱為 WebStorage，存儲(chǔ)大小一般支持5mb左右，但是不同的瀏覽器也有區(qū)別，具體內(nèi)容介紹跟隨小編一起看看吧2022-04-04