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傳遞被勾選行的數據，selected設置是否選中。
需求是每次打開彈窗都會重新獲取表格數據，并且要選中對應的數據，但直接使用那個方法并沒有效果，因為表格中的數據還沒有請求出來。
解決
第一步獲取數據后在需要進行勾選操作的外面套一個$nextTick（并沒完全實現）
this.$nextTick(() => {
checkedList.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row,true);
});
});
$nextTick 是在下次 DOM 更新循環(huán)結束之后執(zhí)行延遲回調，在修改數據之后使用 $nextTick，則可以在回調中獲取更新后的 DOM。
但這樣任然無法正常顯示
解決：
這里通過從所有列表tableData中找到需要選中的項來幫助選中，直接使用選中列表來設置會出錯
最終代碼
this.$nextTick(() => {
checkedLi.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(
this.list.find((item) => {
return row.FIELD_CODE == item.FIELD_CODE;
}),
true
);
});
});
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文檔將介紹如何通過點擊父列表（表格）中的數據行來獲取到子列表（表格）的數據,代碼示例是基于Vue框架實現的一個組件,包含了父列表和子列表,通過點擊父列表的數據行來動態(tài)獲取子列表的數據,感興趣的朋友跟隨小編一起看看吧2024-06-06
Vue + Element-ui的下拉框el-select獲取額外參數詳解
這篇文章主要介紹了Vue + Element-ui的下拉框el-select獲取額外參數詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家介紹了Vue中request.js封裝及調用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
vue項目使用md5加密、crypto-js加密、國密sm3及國密sm4的方法
密碼或者其他比較重要東西假如使用明文傳輸中是很危險的,所以就需要前端一些加密協議,對密碼、手機號、身份證號等信息進行保護,下面這篇文章主要給大家介紹了關于vue項目中使用md5加密、crypto-js加密、國密sm3及國密sm4的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了關于單文件組件.vue的使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了Vue自定義指令實現卡片翻轉功能的代碼示例,文章通過代碼示例講解的非常詳細,對大家的學習或工作有一定的參幫助,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue.js body的css不生效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue-video-player 通過自定義按鈕組件實現全屏切換效果【推薦】
這篇文章主要介紹了vue-video-player,通過自定義按鈕組件實現全屏切換效果,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
隨著Vue的使用越來越多,對Vue的其他知識點也開始逐漸多了解一點,這次做頁面上的計算,用了Watch偵聽器,這篇文章主要給大家介紹了關于Vue中偵聽器基本用法的相關資料,需要的朋友可以參考下2021-08-08
本文詳細介紹了在Vue項目中實現加載動畫的方法,通過在app.vue注入樣式、封裝js文件及在main.js掛載,最后在頁面調用觸發(fā)的具體步驟,為開發(fā)者提供實用指南2026-05-05