在el-table上方添加全选功能、当前页面选择xxx条、已选择xxx条
需求最终实现如图
整体逻辑还是比较复杂的，下面一步一步讲解
整体思想的阐述
本人设计逻辑将全选分为两种情况，一种是没有全部选择，这时的数据通过存储到本地进行一些操作（比如现在已选择的条数是通过返回当前存储的数组长度），另一种是全选状态，包括全部选择后取消了某几条，这时是通过保存未选择的某几条进行数据的一些操作（比如现在已选择的条数是通过接口返回的数据总条数减去当前淘汰的条数）
解决跨页选择问题（所选条数都没有达到页面最大条数）
el-table标签内添加:row-key=“getRowKey”，getRowKey为一个函数返回每一行的主键，这样就可以进行跨页选择了，如果不添加row-key会发生跨页后选择的数据取消勾选的问题
将已选择xxx条进行数据对应
我这里已选绑定给了变量allSelectedLength使用computed进行计算，代码就直接粘出来了
allSelectedLength() {
if (this.isStillAll) {
return this.total - this.outCodes.length // 如果是全选状态，返回接口返回的数据总条数减去当前页面淘汰的条数，我这里通过outCodes存储当前页面淘汰的条数
} else {
return this.multipleSelection.length + this.echoHighlight.length // 如果不是全选状态返回当前页面选择的条数，我这里通过multipleSelection进行存储当前页面选择的数据
}
}
将当前页面选择xxx条进行数据对应
这里已选绑定给了变量allSelectedLength使用computed进行计算，代码就直接粘出来了
selectedLength() {
// 通过循环当前页面选择的数据与当前页的列表数据进行主键对比如果相同则添加到我这里定义的cur最后返回cur的长度
const cur = []
this.multipleSelection.map(item => {
this.tableData.map(value => {
if (value.ruleCode === item.ruleCode) {
cur.push(value)
}
})
})
return cur.length
}
全选功能的编写，同样直接将代码粘贴出来了
// 全部选择
selectAllRule() {
// 这里全选按钮因为是个复选项所以既可以进行全选也可以进行清空操作，这里绑定了一个isdoCheckAll如果是true则为全选操作
if (this.isdoCheckAll) {
this.isStillAll = true // 将全选状态置为true
this.outCodes = [] // 将当前页面淘汰的数组置空
this.isIndeterminate = false // 控制全选复选框是否显示“—”（也就是没有全选的状态）
this.isdoCheckAll = true // 全选复选框内为“√”也就是全选状态
this.$refs.singleTable.clearSelection(); // 将列表内选择的数据清空，防止重复选择使保存当前页面已选数据的数组溢出
this.tableData.map(val => {
// 通过遍历当前列表数据进行当前也得选择（使用户看起来已经全选了，因为我们拿不到未显示的页面的数据所以无法做到真正的所有数据选择）
this.$refs.singleTable.toggleRowSelection(val, true)
})
} else {
// 如果是取消全选调用取消选中全部函数
this.cancelSelectAllRule()
}
}，
// 取消选中全部
cancelSelectAllRule() {
// 这里是判断当前是否处于进入其他页面后回显表格选择的状态后点击清空
if (this.echoHighlight && this.echoHighlight.length > 0) {
this.echoHighlight = []
}
this.isOutIng = false // 将当前页面是否处于淘汰状态置为false
this.isIndeterminate = false // 控制全选复选框是否显示“—”（也就是没有全选的状态）
this.isdoCheckAll = false // 控制全选复选框是否显示“√”
this.isStillAll = false // 将全选状态置为false
this.outCodes = []
this.multipleSelection = []
this.$refs.singleTable.clearSelection();
},
到这里非全选状态下显示就没有问题了，但是全选状态下如果进行取消某几项的操作会有些问题，我再来一步一步讲解
全选状态下第一个问题，解决页面取消某几项后当前页面选择条数没有改变，el-table标签添加@select=“onSelect”
onSelect(rows, row) {
if (this.isStillAll) {
const selected = rows.length && rows.indexOf(row) !== -1
// 判断当前是否为取消勾选
if (!selected) {
this.isOutIng = true
this.outCodes.push(row.ruleCode)
} else {
this.outCodes.splice(this.outCodes.indexOf(row.ruleCode), 1)
}
}
},
全选状态下第二个问题，解决页面中某页全部取消或选择这里需要绑定一个@selection-change=“handleSelectionChange”
handleSelectionChange(val) {
// 如果是某页全部选择
if (this.isStillAll && val.length === this.tableData.length) {
this.tableData.map(ele => {
if (this.outCodes.indexOf(ele.ruleCode) !== -1) {
this.outCodes.splice(this.outCodes.indexOf(ele.ruleCode), 1)
}
})
}
// 如果是某页全部取消选择，这里pageTurn需要在页面跳转时进行操作true和false
if (this.isStillAll && !val.length && !this.pageTurn) {
this.tableData.map(ele => {
if (this.outCodes.indexOf(ele.ruleCode) === -1) {
this.outCodes.push(ele.ruleCode)
}
})
}
this.multipleSelection = val;
},
这时数据的条数显示就没有问题了，但是如果跳转其他页面后返回回显会有问题
解决页面跳转回显问题
// 页面跳转前需要调用，主要是防止重复进入其他页面后回显
// 确保回显没问题
backNoProblum() {
// --------------------------确保重复新增返回回显没有问题--开始
this.multipleSelection.map(item => {
this.echoHighlight.map((value, ind) => {
if (value.ruleCode === item.ruleCode) {
this.echoHighlight.splice(ind, 1)
}
})
})
this.echoHighlight = [...this.multipleSelection, ...this.echoHighlight]
this.echoHighlight.map(ele => {
if (ele.isCheck && ele.isCheck === true) {
ele.isCheck = false
}
})
// --------------------------确保重复新增返回回显没有问题--结束
}
// 具体回显操作，这里没有封装成函数（可以自己封装成一个函数）
this.$nextTick(() => {
// 如果是查看后回显
let loopNum = 0
if (this.echoHighlight && this.echoHighlight.length > 0) {
this.echoHighlight.map(item => {
this.tableData.map(value => {
if (value.ruleCode === item.ruleCode) {
loopNum++
item.isCheck = true
this.$refs.singleTable.toggleRowSelection(value, true)
}
})
})
}
while (loopNum > 0) {
this.echoHighlight.map((ele, ind) => {
if (ele.isCheck && ele.isCheck === true) {
this.echoHighlight.splice(ind, 1)
loopNum--
}
})
}
})