<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;
}