element UI table表格的多选框 如何根据条件隐藏显示

最近在做项目的时候遇到一个问题，使用的是table组件中的多选，需求要求的是，列表数据除了状态为待审核的可选之外，其他状态前的复选框不可选择。看了下文档结合一些朋友的建议，总结可以使用如下的方法来解决。

通过添加相应类来控制样式，设置 display: none ,达到隐藏 checkbox 的目的。

利用Table Attributes 属性里面的 cell-class-name 属性，添加单元格的class

<template>

    <el-table

     :cell-class-name="cellcb"

     ...

    >

     </el-table>

    

</template>



<script>

  methods: {

    cellcb(row){

      if(row.row.checkStatus === 1&&row.columnIndex === 0){

        return "myCell"

      }

    }

  

</script>



<style>

 .myCell .el-checkbox__input {

  display: none

}

   

</style>

或者使用如下的办法：

比如状态为1时不显示复选框 

<el-table-column type="selection" width="45" v-if="checkStatus != 1"></el-table-column>

通过以上办法可以实现需求想要的效果。