使用element組件table表格實現(xiàn)某條件下復(fù)選框無法勾選
element組件table表格實現(xiàn)某條件下復(fù)選框無法勾選
需求
實現(xiàn)el-table存在復(fù)選框，但在啟用條件下無法勾選。
<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 時 該行復(fù)選框不可勾選
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組件復(fù)選框默認(rèn)選中不生效
問題描述
獲取到要默認(rèn)選中的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ā)，只會被推入到隊列中一次。這種在緩沖時去除重復(fù)數(shù)據(jù)對于避免不必要的計算和 DOM 操作上非常重要。然后，在下一個的事件循環(huán)“tick”中，Vue 刷新隊列并執(zhí)行實際 (已去重的) 工作。Vue 在內(nèi)部嘗試對異步隊列使用原生的 Promise.then 和MessageChannel，如果執(zhí)行環(huán)境不支持，會采用 setTimeout(fn, 0)代替。
例如，當(dāng)你設(shè)置vm.someData = ‘new value’，該組件不會立即重新渲染。當(dāng)刷新隊列時，組件會在事件循環(huán)隊列清空時的下一個“tick”更新。多數(shù)情況我們不需要關(guān)心這個過程，但是如果你想在 DOM 狀態(tài)更新后做點(diǎn)什么，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發(fā)人員沿著“數(shù)據(jù)驅(qū)動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用Vue.nextTick(callback) 。這樣回調(diào)函數(shù)在 DOM 更新完成后就會調(diào)用。
解決方案
改為：
this.$nextTick(() => {
this.$refs.multipleTable.toggleRowSelection(row)
})將回調(diào)（這里是操作DOM更新選中數(shù)據(jù)）延遲到下次 DOM 更新循環(huán)之后執(zhí)行。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
- 關(guān)于extjs treepanel復(fù)選框選中父節(jié)點(diǎn)與子節(jié)點(diǎn)的問題
- vue基于element-ui的三級CheckBox復(fù)選框功能的實現(xiàn)代碼
- vue+element UI實現(xiàn)樹形表格帶復(fù)選框的示例代碼
- vuejs+element UI table表格中實現(xiàn)禁用部分復(fù)選框的方法
- element的el-tree多選樹(復(fù)選框)父子節(jié)點(diǎn)關(guān)聯(lián)不關(guān)聯(lián)
- el-table?選中行與復(fù)選框相互聯(lián)動的實現(xiàn)步驟
- Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法
- Vue el-table復(fù)選框全部勾選及勾選回顯功能實現(xiàn)
- el-table表格點(diǎn)擊該行任意位置時也勾選上其前面的復(fù)選框
相關(guān)文章
Vue3中使用Element-Plus的el-upload組件限制只上傳一個文件的功能實現(xiàn)
在 Vue 3 中使用 Element-Plus 的 el-upload 組件進(jìn)行文件上傳時,有時候需要限制只能上傳一個文件,本文將介紹如何通過配置 el-upload 組件實現(xiàn)這個功能,讓你的文件上傳變得更加簡潔和易用,需要的朋友可以參考下2023-10-10
vue.js出現(xiàn)Vue.js?not?detected錯誤的解決方案
這篇文章主要介紹了vue.js出現(xiàn)Vue.js?not?detected錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
關(guān)于ElementUI的el-upload組件二次封裝的問題
這篇文章主要介紹了關(guān)于ElementUI的el-upload組件二次封裝的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue如何直接獲取url中的參數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue提供了mixin、extends配置項,最近使用中發(fā)現(xiàn)很好用,下面這篇文章主要給大家介紹了關(guān)于Vue中Mixin&extends的詳細(xì)使用方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02
這篇文章主要給大家介紹了關(guān)于vue打包上傳服務(wù)器刷新404問題的兩種方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
使用vue實現(xiàn)多規(guī)格選擇實例（SKU）
這篇文章主要介紹了使用vue實現(xiàn)多規(guī)格選擇實例（SKU），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要給大家介紹了關(guān)于分離vue文件中css、js代碼的簡單技巧,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了基于javascript的拖拽類封裝，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue實現(xiàn)商品詳情頁的評價列表功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09