问题说明
针对于el-table表格合并后checkbox选值问题,这里特别需要注意的是不要用selection-change这个事件,该事件就是当选择项发生变化时会触发该事件,这里我们会用到一个单选事件select和全选事件select-all
效果图
代码
// @select="handleTableSelection" table的单选事件
handleTableSelection(val,row){
// table的数据源
let tableData = [...this.formTableData.tableData]
// 点击table复选框 收集 数据源
let sltList = [...this.sltList]
// flag为true的时候代表的是全选 为false则代表不全选
// 全选--勾选or不勾选逻辑
if(this.flag){
// isSelect为true代表全选之后点击取消
// isSelect为false代表全选之后点击取消然后又点勾选
let isSelect = sltList.length && sltList.indexOf(row) > -1
// 收集第一次勾选取消之后 收集原来勾选的数据
let sltListCheck = []
if(isSelect){
tableData.forEach(item=>{
if(item.index != row.index){
sltListCheck.push(item)
}
})
this.sltList = sltListCheck
}else{
// 当再次勾选的时候 在原有的sltList集合 push新的勾选数据
tableData.forEach(item=>{
if(item.index == row.index){
this.sltList.push(item)
}
})
}
console.log('全选--勾选or不勾选逻辑-->>',this.sltList)
}else{
// 不全选--勾选or不勾选逻辑
let checkList = []
if (tableData.length && val.length) {
// tableData为table数据数组
// val为复选框选择之后的数组
// 两个数组相互比较 如果index相同 则收集到checkList数组里面
tableData.forEach(item => {
val.forEach(ele => {
if (item.index == ele.index) {
checkList.push(item)
}
})
})
}
this.sltList = checkList
console.log('不全选--勾选or不勾选--sltList-->>>',this.sltList)
}
},
// @select-all="handleTableSelectionAll" table的全选事件
handleTableSelectionAll(sltList){
if (sltList.length) {
// flag为true的时候代表的是全选 为false则代表不全选
// sltList 为点击table复选框 收集 数据源
this.flag = true
this.sltList = this.formTableData.tableData
}else{
this.flag = false
this.sltList = []
}
console.log('handleTableSelectionAll',this.sltList)
},