合并单元格之后点击checkbox选择数据,默认只会选中第一行,当有多行的时候就需要自己处理数据了。
<el-table
:data="table.records"
@select="handleSelectionChanges"
@select-all="handleSelectionChangesAll"
></el-table>
// 单选选中的数据
handleSelectionChanges(val,row) {
//点击了全选
if(this.rowArr.length>0){
//是否存在当前点击行 true就是选中,0或者false是取消选中
let isSelect = this.rowArr.length && this.rowArr.indexOf(row) > -1
if(isSelect){
//当前行选中时push数据
this.table.records.forEach((el)=>{
//push数据时要过滤掉当前选中行 element会默认把当前行添加进去 如果在手动push就会出现重复数据
if(el.date==row.date&&el.actType==row.actType&&el.id!=row.id){
this.rowArr.push(el)
}
})
}else{
//当前行取消时删除数据
for(var i=0,flag=true,len=this.rowArr.length;i<len;flag ? i++ : i){
if( this.rowArr[i]&&this.rowArr[i].date==row.date&&this.rowArr[i].actType==row.actType ){
this.rowArr.splice(i,1);
flag = false;
} else {
flag = true;
}
}
}
this.multipleSelection = this.rowArr
}else{
//未全选
this.multipleSelection = []
val.forEach((el)=>{
this.table.records.forEach((ell)=>{
if(el.date==ell.date&&el.actType==ell.actType){
if(this.multipleSelection.length<1){
this.multipleSelection.push(ell)
}else{
//存在就会返回true,否则返回false
var result = this.multipleSelection.some(item=>{
if(item.id==ell.id){
return true
}
})
// 如果存在
if(result){
this.multipleSelection.forEach((res,resIndex)=>{
if(res.date==row.date&&res.actType==row.actType){
this.multipleSelection.splice(resIndex,1)
}
})
}else{
this.multipleSelection.push(ell)
}
}
}
})
})
}
},
// 全选选中的数据
handleSelectionChangesAll(val) {
this.multipleSelection = [];
this.multipleSelection = val;
this.rowArr = val;
},
Tips:当点击全选按钮选择数据之后,再次点击单个行选择数据,无论是选中或者取消element会默认的改变数据,所以当你要push数据的时候要把选中的那一行先过滤掉,然后在push数据,否则就会出现两条相同的数据。