elementUI el-table 使用表格多选时，根据数据状态禁用部分行的选择框

m0_68964998

已于 2023-11-24 16:28:08 修改

阅读量2.4k

点赞数 2

文章标签： elementui vue.js 前端

于 2023-09-19 15:22:35 首次发布

本文链接：https://blog.csdn.net/m0_68964998/article/details/133030735

版权

1、在type = selection 列加上selectable方法，利用函数返回值来控制勾选框的可选与禁用

<el-table border ref="table" :data="tableData" tooltip-effect="dark" style="width: 100%" height="40vh" :stripe="true"   @selection-change="handleSelectionChange">
           <el-table-column  type="selection" width="50" align="center" :selectable="selectable" fixed="left"></el-table-column>
 </el-table>

2、

 selectable(row, index) {
     if (row.shelfFlag == 0 || row.sequestrationFlag == 1) {
        return false         //禁用
      } else {
        return true          //可选
      }
    },