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

這篇“怎么處理elementUI中表格多選框禁用的問題”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么處理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="選擇產品" align="center" width="350">
   </el-table-column>
</el-table>

方法函數

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為綁定的表格數據，將表格第一列的type設置為selection，代表多選。

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

如下：

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

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