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