怎么處理elementUI中表格多選框禁用的問題

這篇“怎么處理elementUI中表格多選框禁用的問題”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么處理elementUI中表格多選框禁用的問題”文章吧。

處理elementUI中表格多選框禁用

在 el-table-column type 類型為 selection 組件中，添加 :selectable='方法名'

<el-table :data="tableData" v-loading="loading" max-height="570" stripe :header-cell- @selection-change="handleSelectionLeftChange">
   <el-table-column type="selection" width="50" :selectable='selectEnable'>
   </el-table-column>
   <el-table-column prop="appName" label="選擇產(chǎn)品" align="center" width="350">
   </el-table-column>
</el-table>

方法函數(shù)

selectEnable(row, rowIndex) {
      if (this.enabelIds.some(item => item === row.id)) {
        return false
      } else {
        return true// 不禁用
      }
    }

elementUI多選表格禁用某一行不被選擇

首先使用element-ui 的表格組件

具體代碼如下

    <el-table :data="tableData">
        <el-table-column 
            type="selection" 
            :selectable="selectHandle" 
            label="多選" 
            align="center">                          
        </el-table-column>
    </el-table>

其中tableData為綁定的表格數(shù)據(jù)，將表格第一列的type設(shè)置為selection，代表多選。

selectable綁定的selectHandle()方法僅對 type=selection 的列有效，類型為 Function，F(xiàn)unction 的返回值用來決定這一行的 CheckBox 是否可以勾選，接下來只需要在selectHandle()方法中設(shè)置返回值就可以了

如下：

    //在參數(shù)row中可以獲得這一行的數(shù)據(jù),index為這一行的下標(biāo),
    //我的需求是禁用第一行,所以在index === 0 的時候,返回false即可
    selectHandle(row, index) {
      return !(index === 0);
    },

以上就是關(guān)于“怎么處理elementUI中表格多選框禁用的問題”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。