element table根据条件隐藏复选框

实现复选框的隐藏是不够的,还要使用css禁用

<el-table
      v-loading="loading"
      :data="merchantList"
      width="800px"
     :cell-class-name="cellClass"
      @selection-change="handleSelectionChange"
    >
      <template slot="empty">
        <svg-icon key="item-warp" type="nodata" icon="icon-wushuju" />
      </template>
      <el-table-column
        type="selection"
        label="全选"
        width="55"
        :selectable="selectable"
      ></el-table-column>
 </el-table>
methods:{
    
    
 cellClass({
    
     row, columnIndex }) {
    
    
      if (row.syncStatus == "SUCCESS_SYNC" && columnIndex === 0) {
    
    
        // 根据某个属性,添加样式,隐藏复选框
        return "myCell";
      }
    },
    selectable(row, columnIndex) {
    
    
      if (row.syncStatus == "SUCCESS_SYNC") {
    
    
        // 根据某个属性,添加样式,隐藏复选框
        return false;
      } else {
    
    
        return true;
      }
    },
}
<style>
.myCell .el-checkbox__input {
    
    
  display: none !important;
}
</style>

猜你喜欢

转载自blog.csdn.net/weCat_s/article/details/117560239