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