elementui的表格默认是没有所有数据选中的操作的,仅仅只是选中当前页的10条或者20条数据,因此我们需要自己手动加入一个全选操作的按钮。以此来将数据全部选中保存。
总体来看无非就是几步操作而已。
第一步操作思路:全选操作
反过来:取消全选操作
思路:
点击全选按钮时候,触发其change事件,然后调用单独列表接口获取所有的列表数据,然后保存在一个数组中,最后调用toggleAllSelection()方法即可全部勾选
反之:将保存的数组重置,然后调用clearSelection()方法取消勾选即可。
第二步操作思路:全选之后,去掉几个勾选内容。然后翻页又去掉几个勾选内容。来回切换翻页,该去掉的内容不在被勾选。
反过来:取消全选之后,勾选当页几个内容,然后翻页又勾选几个内容,来回切换,勾选的内容任然存在。
思路1:
全选之后,去掉几个勾选内容,实际就行调用el-table的@select方法将点击的几个内容从保存的数组(saveCheckList)中一一删掉即可。然后来回翻页取消勾选,实际上就是让翻页获取的新数据(operationList)与保存的数据(saveCheckList)进行对比,如果存在的就勾选上。
反之:勾选内容,实际就行调用el-table的@select方法将点击的几个内容添加到保存的数组(saveCheckList)中,然后来回翻页勾选上,实际上就是让翻页获取的新数据(operationList)与保存的数据(saveCheckList)进行对比,如果存在的就勾选上
注意:选中状态的勾选必须在接口获取数据之后
第三步操作思路:勾选当页全选按钮,然后去掉几个勾选,进行翻页,又勾选当页全选按钮,然后又去掉几个勾选,来回切换状态保持。当页全选按钮只有当前全选和取消两个效果
代码:
<template>
<div class='xxx-box'>
<!-- 表格 -->
<el-table
:data="operationList"
ref="mListTable"
@select="changeSelect"
@select-all="selectAll"
>
......
</el-table>
<!-- 分页 -->
<div class="all-el-page">
<div class="all-check">
<span class="all-check-span"
>已选择{{ saveCheckList.length }}条数据</span
>
<el-checkbox v-model="pageChecked" @change="checkAll">全选</el-checkbox>
</div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryParams.page"
:page-size="queryParams.size"
layout="total, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data(){
return{
pageChecked:false, //全选切换状态
// 保存起来的选择项
saveCheckList: [],
// 分页
queryParams: {
page: 1,
size: 10,
},
// 分页总数
total:0,
}
},
methods:{
// 当页勾选以及取消
changeSelect(selection, row) {
console.log("selection", selection);
console.log("row", row);
// 从保存项saveCheckList里面寻找,如果找到了row则删除,如果没找到则添加
let fitemIndex = this.saveCheckList.findIndex((item) => {
return item.ebIds == row.ebIds;
});
if (fitemIndex < 0) {
this.saveCheckList.push(row);
} else {
this.saveCheckList.splice(fitemIndex, 1);
}
console.log("this.saveCheckList", this.saveCheckList);
},
// 表格全选内容
selectAll(val) {
console.log("selectAll", val);
// 如果为空,则为清除选项状态,此时将table中的所有内容都从saveCheckList移除
if (val && val.length == 0) {
this.operationList.forEach((row) => {
// 从保存项saveCheckList里面寻找,如果找到了row则删除,如果没找到则添加
let fitemIndex = this.saveCheckList.findIndex((item) => {
return item.ebIds == row.ebIds;
});
// 找到了就删除掉
if (fitemIndex >= 0) {
this.saveCheckList.splice(fitemIndex, 1);
}
});
} else if (val && val.length != 0 && this.saveCheckList.length != 0) {
// 如果不为空,且this.saveCheckList也不为空则从val里面找
val.forEach((row) => {
// 从保存项saveCheckList里面寻找,如果找到了row则删除,如果没找到则添加
let fitemIndex = this.saveCheckList.findIndex((item) => {
return item.ebIds == row.ebIds;
});
// 没找到就push进去
if (fitemIndex < 0) {
this.saveCheckList.push(row);
}
});
} else if (val && val.length != 0 && this.saveCheckList.length == 0) {
val.forEach((row) => {
this.saveCheckList.push(row);
});
}
},
// 全选按钮
checkAll() {
// 全选操作
if (this.pageChecked) {
// 调用接口查询所有的列表数据并且保存起来
let param = {
page: 0,
size: 1000000,
ebId: this.queryParams.ebId,
ebActivated: this.queryParams.ebActivated,
ebValid: this.queryParams.ebValid,
ebBatch: this.queryParams.ebBatch,
ebmType: this.queryParams.ebmType,
ebModelName: this.queryParams.ebModelName,
ebSensorStatus: this.queryParams.ebSensorStatus,
ebLeaveStatus: this.queryParams.ebLeaveStatus,
};
emergencyBaggetList(param).then((response) => {
if (response.status == "0") {
this.saveCheckList = response.data.content;
console.log("this.saveCheckList", this.saveCheckList);
// 将当前的页的所有内容加上勾选状态
this.$nextTick(() => {
this.$refs["mListTable"].clearSelection();
this.$refs["mListTable"].toggleAllSelection();
});
}
});
} else {
// 取消全选,当前所有选择项清空
this.saveCheckList = [];
// 将当前的页的所有内容取消勾选状态
this.$nextTick(() => {
this.$refs["mListTable"].clearSelection();
});
}
},
// 分页切换时准备表格的选中状态 -- 这个内容必须放在表格数据赋值之后--()
// tableList 为当前表格的数据
checkPageStatus(tableList) {
tableList.forEach((row) => {
let findex = this.saveCheckList.findIndex((item) => {
return item.ebIds == row.ebIds;
});
console.log("checkPageStatus", findex);
if (findex >= 0) {
this.$nextTick(() => {
this.$refs["mListTable"].toggleRowSelection(row);
});
}
});
},
/** 查询列表 */
getList() {
let param = {
page: this.queryParams.page - 1,
size: this.queryParams.size
};
emergencyBaggetList(param).then((response) => {
this.operationList = response.data.content;
// 准备表格的选中状态
this.checkPageStatus(this.operationList);
this.total = response.data.totalElements;
});
},
/* 分页 */
handleSizeChange(val) {
this.queryParams.size = val;
this.getList();
},
/* 分页 */
handleCurrentChange(val) {
this.queryParams.page = val;
this.getList();
},
}
}
</script>
效果