多选表格去掉全选显示序号(样式):
.tableCss {
.el-table-column--selection.is-leaf .el-checkbox {
display: none;
}
.el-table-column--selection.is-leaf ::before {
content: '选择';
}
}
需求:
外层表格数据 可以改动,内层不变,但是做删除时需要联动:
tableData1:弹窗中多选表格的数据
tableData:页面中表格的数据
我的处理逻辑是,深拷贝多选表格的数据,渲染到页面中,将index绑进数据中,做标识,这样,外层数据在删除时,就可以确定到弹窗表格取消选中的是哪一组数据了:
我是动态获取的表格数据,此处有坑:打开弹窗时需要请求数据,但是如果已经勾选,第二次打开弹窗,再次请求,返回数据就会覆盖原本数据,选中状态就会被全部取消掉,这样就违背了联动的初衷,所以此处需要判断:
addNew() {
if (this.page != this.current) { // 判断当前页码和上次返回页码是否一致 一致的话,就不再请求
this.$api.order.packageSelectList(this.page).then(res => {
let list = res.records
// 翻页处理
if (this.page == 1) {
this.tableData1 = list
} else {
this.tableData1.push(...list)
}
this.tableData1.forEach((item, indexs) => {
item.indexs = indexs // 将索引绑在元素上,方便后续做联动
})
this.listTotal = res.total
this.current = res.current
})
}
this.dialogVisible2 = true
},
选中数据事件:
// 选择时深拷贝数据
// 在data中定义数组dataList
handleSelectionChange(val) {
this.dataList=val // 这里可以深拷贝,也可以浅拷贝,在弹窗确认时,深拷贝和在这里深拷贝二选一
},
弹窗点击确认:
sureProduct() {
let arr = JSON.parse(JSON.stringify(this.dataList)) // 深拷贝数据,这样修改的时候就不会改到原本表格的数据了
let list = this.getList(arr, true) // 处理数据格式
let list1 = this.editData(list) // 处理数据格式 这里是外层表格显示数据与内层不一样,所以进行处理
this.tableData = list1
this.dialogVisible2 = false // 关闭弹窗
},
删除外层表格数据,内层表格对应数据取消选中:
apply(id, index, type, indexs) {
this.$refs.multipleTable.toggleRowSelection(this.tableData1[this.indexs]); // 取消表格中对应数据的选中
this.tableData.splice(this.index, 1) // 删除外层表格中对应数据
}
这样就做好了,删除的联动,外层数据的修改,也不会改到多选表格的数据。但是这样有一个bug:
重新选择数据后,新数据会覆盖原本被改动了的数据
所以弹窗确认时不能直接覆盖:
sureProduct() {
// let arr = JSON.parse(JSON.stringify(this.dataList))
let arr1 = JSON.parse(JSON.stringify(this.dataList)),
arr2 = JSON.parse(JSON.stringify(this.tableData)),
Alength = this.tableData.length;
if (Alength > 0) {
this.tableData.forEach(val => {
arr1 = arr1.filter(ele => ele.indexs != val.indexs) // 增加的数据
})
this.dataList.forEach(val => {
arr2 = arr2.filter(ele => ele.indexs != val.indexs) // 改变和减少的数据
})
} else {
arr1 = JSON.parse(JSON.stringify(this.dataList))
}
if (arr1.length > 0) {
let list = this.getList(arr1, true)
let list1 = this.editData(list)
this.tableData.push(...list1)
}
if (arr2.length > 0) {
arr2.forEach(element => {
this.tableData = this.tableData.filter(ele => ele.indexs != element.indexs) // 筛选掉减少的数据
});
}
this.dialogVisible2 = false
},