<template>
<div>
<div class="table taskcontent">
<el-table :data="tabledata" style="width:100%" @selection-change='selRow' ref="multipleTable" :row-key="getRowKeys">
<el-table-column type="selection" min-width="55" align="center" :reserve-selection="true"></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>
</div>
<el-checkbox label="全选" :indeterminate="isIndeterminate" v-model="checkAll" @change="selAll()" ></el-checkbox>
<el-pagination
@size-change="handlePageSize"
@current-change="handleCurrentPage"
:current-page="currentPage"
:page-sizes="[3,5]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
selectedAssetsList:[],
assetsUidList:[],
currentPage:1,
pageSize:3,
total:8,
isIndeterminate:false,//对el-checkbox控制不完整的全选状态
checkAll:false,//对el-checkbox控制全选状态
tabledata:[
],
newTabledata: [ //el-table的数据内容
{
id:1,
num: "201903123345",
name: "等级评价",
time: "2019-10-10"
},
{ id:2,
num: "201903123346",
name: "供应商推荐",
time: "2019-10-14"
},
{
id:3,
num: "201903123348",
name: "供应商推荐",
time: "2019-10-15"
},
{
id:4,
num: "201903123350",
name: "我的报告",
time: "2019-10-16"
},
{
id:5,
num: "201903123345",
name: "等级评价",
time: "2019-10-10"
},
{ id:6,
num: "201903123346",
name: "供应商推荐",
time: "2019-10-14"
},
{
id:7,
num: "201903123348",
name: "供应商推荐",
time: "2019-10-15"
},
{
id:8,
num: "201903123350",
name: "我的报告",
time: "2019-10-16"
}
]
};
},
mounted(){
this.search();
},
methods:{
// 获取row的key值
getRowKeys(row) {
return row.id;
},
handlePageSize(pageSize){
this.pageSize = pageSize;
this.search();
},
handleCurrentPage(currentPage){
this.currentPage = currentPage;
this.search();
},
search(){
this.tabledata = this.newTabledata.slice((this.currentPage - 1)*this.pageSize,this.currentPage * this.pageSize);
},
//全选按键功能实现
selAll() {
if(this.$refs.multipleTable.selection.length < this.newTabledata.length){
this.checkAll=true;
}else{
this.checkAll=false;
}
if(this.checkAll){
this.newTabledata.forEach(row=>{
this.$refs.multipleTable.toggleRowSelection(row,true);
});
}else{
this.$refs.multipleTable.clearSelection();
this.selectedAssetsList = [];
this.assetsUidList = [];
}
},
stateChange(){
var vm = this;
if(vm.assetsUidList.length < this.newTabledata.length && vm.assetsUidList.length > 0){
this.isIndeterminate = true;
} else if(vm.assetsUidList.length == this.newTabledata.length){
this.isIndeterminate = false;
this.checkAll = true;
} else if(vm.assetsUidList.length == 0){
this.isIndeterminate = false;
this.checkAll = false;
}
},
//表格内checkbox触发的全选按钮状态变化
selRow(val){
const vm = this;
// 选择的行的完整数据。
vm.selectedAssetsList = Array.from(new Set([...vm.selectedAssetsList,...val]));
const currentArr = val.map(item => item.id);
const arr1 = [...vm.assetsUidList, ...currentArr];
vm.assetsUidList = Array.from(new Set(arr1));
const tableData = vm.tabledata.map(item => item.id);
const difference = tableData.filter(v => !currentArr.includes(v));
difference.forEach(item => {
if (vm.assetsUidList.indexOf(item) !== -1) {
vm.assetsUidList.splice(vm.assetsUidList.indexOf(item), 1);
}
});
// 把选中的行数据进行去重。
var list = vm.selectedAssetsList.filter(item=>vm.assetsUidList.indexOf(item.id)!=-1);
for(var i =0;i<list.length;i++){
for(var j=i+1;j<list.length;j++){
if(list[i].id==list[j].id){
list.splice(j,1);
j--;
}
}
}
setTimeout(()=>{
this.stateChange();
},0)
},
}
}
</script>
