Vue Elementui去掉表格自带多选自己在外部写一个多选

<template>
  <div class="table taskcontent">
      <el-checkbox label="全选" :indeterminate="isIndeterminate" v-model="checkAll" @change="selAll()" ></el-checkbox>
   <el-table :data="tabledata" :header-cell-class-name="cellClass" style="width:100%" @selection-change='selRow' ref="multipleTable">
      <el-table-column type="selection" min-width="55" align="center" ></el-table-column>
      <el-table-column prop="num" label="编号" min-width="120" align="center"></el-table-column>
      <el-table-column prop="name" label="任务名称" min-width="300" align="center"></el-table-column>
      <el-table-column prop="time" label="创建时间" min-width="300" align="center"></el-table-column>
      <el-table-column prop="option" label="操作" min-width="300" align="center">
        <template >
          <el-button type="primary" class="btn-blue1" size="mini">处理</el-button>
          <el-button type="primary" size="mini"  >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 data() {
       return {
      isIndeterminate:false,//对el-checkbox控制不完整的全选状态
      checkAll:false,//对el-checkbox控制全选状态
      tabledata: [ //el-table的数据内容
        {
          num: "201903123345",
          name: "等级评价",
          time: "2019-10-10"
        },
        {
          num: "201903123346",
          name: "供应商推荐",
          time: "2019-10-14"
        },
        {
          num: "201903123348",
          name: "供应商推荐",
          time: "2019-10-15"
        },
        {
          num: "201903123350",
          name: "我的报告",
          time: "2019-10-16"
        }
      ],
    };
    },

    methods: {
      selAll() {
      if(this.$refs.multipleTable.selection.length < this.tabledata.length){
        this.checkAll=true;
      }else{
        this.checkAll=false;
      }
      this.$refs.multipleTable.toggleAllSelection();
    },
    //表格内checkbox触发的全选按钮状态变化
    selRow(val){
        if(val.length < this.tabledata.length && val.length > 0){
          this.isIndeterminate = true;
        } else if(val.length == this.tabledata.length){
          this.isIndeterminate = false;
          this.checkAll = true;
        } else if(val.length == 0){
          this.isIndeterminate = false;
          this.checkAll = false;
        }
        
    },
      cellClass(row){//去掉表格头部多选
          if (row.columnIndex === 0) {
           return 'disabledCheck'
          }
      },
    }
  }
这是css
/deep/.el-table .disabledCheck .cell .el-checkbox__inner{
    display: none !important;
}
/deep/.el-table .disabledCheck .cell::before{
    content: '';
    text-align: center;
}

标签：el,Vue,false,多选,val,Elementui,checkAll,length,10
来源： https://blog.csdn.net/weixin_52489523/article/details/122453546