el-table 多选是否置灰

el-table 按条件控制多选是否置灰

• • • 需求
    • 代码
    • 效果

需求

待审核规则不可删除，操作一列不显示删除按钮，批量删除不可勾选待审核规则。
           

如图：

代码

#  只展示部分代码   是否可选我用 selectable 来判断
<el-table border :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="60" :selectable="checkSelectable"></el-table-column>
  <el-table-column type="index" label="序号" width="60"></el-table-column>
  <el-table-column label="规则名称" prop="ruleName"></el-table-column>
  <el-table-column label="规则类型" prop="ruleType" :formatter="ruleTypeFormat"></el-table-column>
  <el-table-column label="更新时间" prop="updateTime" width="200px"></el-table-column>
  <el-table-column label="创建人" prop="createUser" width="100px"></el-table-column>
</el-table>


methods: {
   // 按条件控制多选是否置灰
   checkSelectable (row) {
     // row就是表格的每行数据， 我们判断审核状态是否不等于1。
     // 如果不等于1返回true 就是可勾选，如果等于1 返回false 多选置灰
     return row.checkStatus !== 1
   }
}
           

效果