element 表格全选,，翻页选中取消相关效果

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) {// 从保存项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);}},// 表格全选内容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,};emergencyBaggetList(param).then((response) => {if (response.status == "0") {this.saveCheckList = response.data.content;// 将当前的页的所有内容加上勾选状态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;});if (findex >= 0) {this.$nextTick(() => {this.$refs["mListTable"].toggleRowSelection(row);});}});},/** 查询列表 */getList() {let param = {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>

element 表格全选,，翻页选中取消相关效果相关推荐

elementui[el-table]表格全选操作以及翻页选中取消相关效果
elementui的表格默认是没有所有数据选中的操作的,仅仅只是选中当前页的10条或者20条数据,因此我们需要自己手动加入一个全选操作的按钮.以此来将数据全部选中保存. 总体来看无非就是几步操作而已. ...
iview table后端分页多选翻页选中回显
在iview的table组件中,前端在多选时如果点击下一页则丢失了上一页table的多选数据(由于采用的后端分页,每次翻页会直接刷新为新数据) 实现效果全选反选选中单条取消单条代码部分定义数 ...
Element表格多选框
变量解释: selectResult: [] // 选中的表格的id数据 tableData: [] // 表格数据 backAllData: [] // 从后端接口获取的所有的id allCheck ...
vue上下全屏翻页_全屏翻页布局
vue上下全屏翻页 View demo 查看演示Download Source 下载源 We have received a couple of requests on how to use the ...
element表格勾选获取序号
element表格勾选获取序号如图,这里有一个需求是勾选某一项为其进行排序,首先需要将原来的序号回显,所以在element的勾选表格的操作中需要获得index值? 查了一下没有在官方文档找到类似于$ ...
JavaScript实现表格全选、全不选、反选
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
jq 批量删除 php,PHP基础班初学心得：用JQ实现表单的全选、反选、取消和删除功能...
摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...
Android开发CheckBox控件，全选，反选，取消全选
在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢首先布局我们的界面: <?xml version="1.0" enc ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...

element 表格全选,，翻页选中取消相关效果

element 表格全选,，翻页选中取消相关效果相关推荐

最新文章

热门文章