如何处理elementUI中表格多选框禁用的问题

目录 处理elementUI中表格多选框禁用 elementUI多选表格禁用某一行不被选择 首先使用element-ui 的表格组件

处理elementUI中表格多选框禁用

在 el-table-column type 类型为 selection 组件中，添加 :selectable='方法名'

<el-table :data="tableData" v-loading="loading" max-height="570" stripe :header-cell-style="headerStyle" @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中表格多选框禁用的问题的详细内容...