这是我参与「第四届青训营 」笔记创作活动的第10天
最近在学习后台管理系统时 发现跨页全选这个难点😵 于是打算记录一下💾
由于数据量大而进行分页 但是全选功能又要全选所有数据 该怎么解决呢？
若向后端拿所有数据 就违背了分页的意义
我的做法是分两种状态 若为全选状态 传给后端未选中的 若为普通状态 传给后端 选中的
<el-button :type="ifSelectAll?'':'primary'" @click="changeIfAll" >
{{ifSelectAll?'取消':'全选'}}
</el-button>
<el-table
@select="changeSelect"
@select-all="changeSelectAll"
>
</el-table>
按钮上根据状态绑定样式 表单上监听事件
select 监听点击数据项事件 select-all监听点击全选（当前页）事件 具体可在element-ui官网查询 几个主要的方法代码如下
changeSelect(selection,row){
// 判断勾选数据行是选中还是取消
// 选中不为空且点击的对应行在选中列中
let selected = selection.length && selection.indexOf(row)!==-1
// 若为跨页全选
if(this.ifSelectAll){
// 勾选上 则把未选中的去掉
if(selected) {
if(this.uncheckedList.length!=0) {
this.uncheckedList.forEach((item,idx) =>{
if(item.student_num == row.student_num) {
this.uncheckedList.splice(idx,1)
// return
}
})
}
}
else this.uncheckedList.push(row)
}
// 非全选状态
else{
if (selected) {
if (this.checkedList.indexOf(row) == -1) this.checkedList.push(row);
} else {
if (this.checkedList.indexOf(row) != -1)
this.checkedList.splice(this.checkedList.indexOf(row), 1);
}
}
},
//手动勾选当页全选
changeSelectAll(selection) {
if (this.ifSelectAll) {
// 判断跨页全选 判断是选中还是取消
if (selection.length > 0) {
//选中，从未选中数组中去掉当前页所有数据
this.backTable.forEach((item) => {
this.uncheckedList.forEach((item_un, index_un) => {
if (item.student_num == item_un.student_num)
this.uncheckedList.splice(index_un, 1);
});
});
} else {
//取消，未选中的数组中记录该数据
this.backTable.forEach((item) => {
if (this.uncheckedList.indexOf(item) == -1)
this.uncheckedList.push(item);
});
}
} else {
//非跨页全选状态，记录当前页选中数据
if (selection.length > 0) {
this.backTable.forEach((item, index) => {
if (this.checkedList.indexOf(item) == -1)
this.checkedList.push(item);
});
} else {
this.backTable.forEach((item, index) => {
this.checkedList.forEach((item_check, index_check) => {
if (item.student_num == item_check.student_num) {
this.checkedList.splice(index_check, 1);
}
});
});
}
}
},
changeIfAll(){
this.ifSelectAll = !this.ifSelectAll
if(this.ifSelectAll) this.backfillSelect()
else this.clearSelect()
},
//回填选中
backfillSelect() {
this.$nextTick(() => {
//跨页全选记录未选中
if (this.ifSelectAll) {
this.backTable.forEach((item, index) => {
if (this.uncheckedList.length > 0) {
let ifSelection = true;
this.uncheckedList.forEach((item_un) => {
if (item.id == item_un.id) ifSelection = false;
});
if (ifSelection)
this.$refs.table.toggleRowSelection(this.backTable[index], true);
}
// 未选中列表
else this.$refs.table.toggleRowSelection(this.backTable[index], true);
});
//非跨页全选记录选中
} else {
if (this.checkedList.length > 0) {
this.backTable.forEach((item, index) => {
let ifSelection = false;
this.checkedList.forEach((item_check) => {
if (item.id == item_check.id) ifSelection = true;
});
if (ifSelection)
this.$refs.table.toggleRowSelection(this.backTable[index], true);
});
}
}
});
},
//全部取消选中
clearSelect() {
this.$nextTick(() => {
this.$refs.table.clearSelection();
});
},
可以发现 每个方法都要根据当前状态进行判断 并对对应状态做出对应的操作
这样大致可以完成基本功能 但是加上两个监听比较好
对表单数据backTable进行监听 每次变化就调用 backfillSelect方法来将对应的项勾选上
例如 全选状态下 翻页 仍然要勾选上
在对状态ifSelectAll进行监听 每次变化就把checkedList uncheckedList 清空
若变为true 则进入全选状态 那此时的uncheckedList 应该是空的
若变为false 则进入普通状态 此时的checkedList 是空的
💭💭💭
记录前端学习中的问题📜
若本文对你有帮助 欢迎点赞收藏👍📑
若有纰漏，敬请包涵，评论区欢迎指正👂
