快捷導(dǎo)航

使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無法勾選

更新時(shí)間：2024年03月11日 10:29:43 作者：藍(lán)胖子的多啦A夢

這篇文章主要介紹了使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無法勾選問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無法勾選

需求

實(shí)現(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') { // 判斷里面是否存在某個(gè)參數(shù)
        //status==finish 時(shí) 該行復(fù)選框不可勾選
          isChecked = false
        } else {
          isChecked = true
        }
        return isChecked
      },

		//確定唯一的key值
      getRowKey(row){
        return row.id; //每條數(shù)據(jù)的唯一識(shí)別值
      },
		//字體顏色置灰
      tableRowClassName({row,rowIndex}){
        if (row.type === 1) { // 判斷里面是否存在某個(gè)參數(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 時(shí)是異步執(zhí)行的，使用上面的方法更新數(shù)據(jù)后，DOM并沒有同步更新，所以沒有顯示出來。

官網(wǎng)是這樣解釋的：

Vue 異步執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化，Vue 將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對于避免不必要的計(jì)算和 DOM 操作上非常重要。然后，在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。Vue 在內(nèi)部嘗試對異步隊(duì)列使用原生的 Promise.then 和MessageChannel，如果執(zhí)行環(huán)境不支持，會(huì)采用 setTimeout(fn, 0)代替。

例如，當(dāng)你設(shè)置vm.someData = ‘new value’，該組件不會(huì)立即重新渲染。當(dāng)刷新隊(duì)列時(shí)，組件會(huì)在事件循環(huán)隊(duì)列清空時(shí)的下一個(gè)“tick”更新。多數(shù)情況我們不需要關(guān)心這個(gè)過程，但是如果你想在 DOM 狀態(tài)更新后做點(diǎn)什么，這就可能會(huì)有些棘手。雖然 Vue.js 通常鼓勵(lì)開發(fā)人員沿著“數(shù)據(jù)驅(qū)動(dòng)”的方式思考，避免直接接觸 DOM，但是有時(shí)我們確實(shí)要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用Vue.nextTick(callback) 。這樣回調(diào)函數(shù)在 DOM 更新完成后就會(huì)調(diào)用。

解決方案

改為：

this.$nextTick(() => {
    this.$refs.multipleTable.toggleRowSelection(row)
})

將回調(diào)（這里是操作DOM更新選中數(shù)據(jù)）延遲到下次 DOM 更新循環(huán)之后執(zhí)行。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無法勾選

目錄

element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無法勾選

需求

Element Table組件復(fù)選框默認(rèn)選中不生效

問題描述

原因分析

解決方案

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具