使用element組件table表格實現(xiàn)某條件下復選框無法勾選
element組件table表格實現(xiàn)某條件下復選框無法勾選
需求
實現(xiàn)el-table存在復選框，但在啟用條件下無法勾選。
<el-table :data="dataList" ref="table" :row-class-name="tableRowClassName" :row-key="getRowKey"
@selection-change="selectionChangeHandle" @sort-change="sortChangeHandle">
<el-table-column fixed="left" :selectable="checkSelect" :reserve-selection="true" type="selection" width="55" align="center"></el-table-column>
</el-table>
//勾選置灰
checkSelect (row,index) {
let isChecked = true;
if (row.status== 'finish') { // 判斷里面是否存在某個參數(shù)
//status==finish 時 該行復選框不可勾選
isChecked = false
} else {
isChecked = true
}
return isChecked
},
//確定唯一的key值
getRowKey(row){
return row.id; //每條數(shù)據(jù)的唯一識別值
},
//字體顏色置灰
tableRowClassName({row,rowIndex}){
if (row.type === 1) { // 判斷里面是否存在某個參數(shù)
return 'fontSize'
}
return ''
},
<style>
.el-table .fontSize{
color: #BFBABA;
}
</style>
Element Table組件復選框默認選中不生效
問題描述
獲取到要默認選中的row后，直接使用：
this.$refs.multipleTable.toggleRowSelection(row)
發(fā)現(xiàn)并沒有選中。
原因分析
Vue 在更新 DOM 時是異步執(zhí)行的，使用上面的方法更新數(shù)據(jù)后，DOM并沒有同步更新，所以沒有顯示出來。
官網(wǎng)是這樣解釋的：
Vue 異步執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化，Vue 將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個 watcher 被多次觸發(fā)，只會被推入到隊列中一次。這種在緩沖時去除重復數(shù)據(jù)對于避免不必要的計算和 DOM 操作上非常重要。然后，在下一個的事件循環(huán)“tick”中，Vue 刷新隊列并執(zhí)行實際 (已去重的) 工作。Vue 在內(nèi)部嘗試對異步隊列使用原生的 Promise.then 和MessageChannel，如果執(zhí)行環(huán)境不支持，會采用 setTimeout(fn, 0)代替。
例如，當你設置vm.someData = ‘new value’，該組件不會立即重新渲染。當刷新隊列時，組件會在事件循環(huán)隊列清空時的下一個“tick”更新。多數(shù)情況我們不需要關心這個過程，但是如果你想在 DOM 狀態(tài)更新后做點什么，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發(fā)人員沿著“數(shù)據(jù)驅動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用Vue.nextTick(callback) 。這樣回調函數(shù)在 DOM 更新完成后就會調用。
解決方案
改為：
this.$nextTick(() => {
this.$refs.multipleTable.toggleRowSelection(row)
})將回調（這里是操作DOM更新選中數(shù)據(jù)）延遲到下次 DOM 更新循環(huán)之后執(zhí)行。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
- 關于extjs treepanel復選框選中父節(jié)點與子節(jié)點的問題
- vue基于element-ui的三級CheckBox復選框功能的實現(xiàn)代碼
- vue+element UI實現(xiàn)樹形表格帶復選框的示例代碼
- vuejs+element UI table表格中實現(xiàn)禁用部分復選框的方法
- element的el-tree多選樹(復選框)父子節(jié)點關聯(lián)不關聯(lián)
- el-table?選中行與復選框相互聯(lián)動的實現(xiàn)步驟
- Vue3+ElementUI 多選框中復選框和名字點擊方法效果分離方法
- Vue el-table復選框全部勾選及勾選回顯功能實現(xiàn)
- el-table表格點擊該行任意位置時也勾選上其前面的復選框
相關文章
Vue3.0結合bootstrap創(chuàng)建多頁面應用
這篇文章主要介紹了Vue3.0結合bootstrap創(chuàng)建多頁面應用,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細介紹了基于Vue.js實現(xiàn)簡單搜索框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
在vue項目中(本地)使用iconfont字體圖標的三種方式總結
這篇文章主要介紹了在vue項目中(本地)使用iconfont字體圖標的三種方式總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue安裝less-loader依賴失敗問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
下面小編就為大家分享一篇vue父組件點擊觸發(fā)子組件事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue緩存組件keepalive的相關資料,keep-alive組件是使用 include exclude這兩個屬性傳入組件名稱來確認哪些可以被緩存的，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-08-08
Vue2集成ElementUI實現(xiàn)左側菜單導航功能
本文主要記錄兩個菜單的生成方式,通過在前端router/index.js中直接進行配置,后端返回菜單數(shù)據(jù)進行對應,可以通過后端返回的菜單數(shù)據(jù)控制權限,另一種是部門靜態(tài)導航,然后再拼接動態(tài)導航,生成完成頁面導航,感興趣的朋友一起看看吧2025-04-04
el-dialog關閉再打開后窗口內(nèi)容不刷新問題及解決
這篇文章主要介紹了el-dialog關閉再打開后窗口內(nèi)容不刷新問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue3.0中Ref與Reactive的區(qū)別示例詳析
在vue3中對響應式數(shù)據(jù)的聲明官方給出了ref()和reactive()這兩種方式,這篇文章主要給大家介紹了關于Vue3.0中Ref與Reactive區(qū)別的相關資料,需要的朋友可以參考下2021-07-07
在Vue中定義一個全局變量是非常常見的需求,這樣可以在多個組件中共享相同的數(shù)據(jù),這篇文章主要介紹了vue如何定義全局顏色變量并用js修改顏色的三種方法,需要的朋友可以參考下2025-05-05