elementui[el-table]表格全选操作以及翻页选中取消相关效果
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>
效果
elementui[el-table]表格全选操作以及翻页选中取消相关效果相关推荐
- element 表格全选,,翻页选中取消相关效果
elementui的表格默认是没有所有数据选中的操作的,仅仅只是选中当前页的10条或者20条数据,因此我们需要自己手动加入一个全选操作的按钮.以此来将数据全部选中保存. 第一步操作思路:全选操作 反过 ...
- vue 带全选和多选的表格怎么写_vue+element-ui里面table组件多选框实现批量操作
vue+element-ui里面table组件多选框实现批量操作 有时候人不是被困难难倒的,是被自己蠢哭的...官方文档用到某个地方的时候,才感觉对这个方面的理解才会加深一点,还是要记录一下这个地方! ...
- ExtJs CheckboxSelectionModel 全选操作后 清空表格头的checkBox
关键代码: var hd = Ext.getCmp("interviewSubscriptionGrid").getEl().select('div.x-grid3-hd-che ...
- JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端 学习路线 笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
- JavaScript实现表格全选、全不选、反选
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- layui结合form,table的全选、反选v1.0
layui结合form,table的全选.反选v1.0 需要引入layui.css和layui.js html代码如下: <div class="layui-form"> ...
- element-ui实现table表格的嵌套(table表格嵌套)功能实现
最近在做电商类型的官网,希望实现的布局如下:有表头和表身,所以我首先想到的就是table表格组件. 表格组件中常见的就是:标题和内容一一对应: 像效果图中的效果,只用基础的表格布局是不行的,因此我想到 ...
- elementUI 中 table表格 图片 放大
elementUI 中 table表格 图片 放大 当项目中表格的表格插入图片,需要放大查看图片, 可使用elementUI的组件 el-popover 弹出框,具体操作: <el-table- ...
- JS实战 · 复选框全选操作
思路: 1.获取被选中checkbox,通过checked属性的状态完成: 2.获取被选中的checkbox的value值: 3.求所有value的和sum: 4.定义span区域存储和sum: 代码 ...
最新文章
- Kotlin 学习笔记(八)—— Kotlin类与对象之接口
- eclipse中tomcat启动不了_Eclipse怎样与Tomcat集成
- .net三层架构开发步骤
- WinCE驱动调试助手V2.5
- python七段数码管倒计时_python实现七段数码管和倒计时效果
- LeetCode 389. Find the Difference
- Delphi 的绘图功能[9] - TextRect
- c语言snprintf函数简介
- 使用soapUI工具做接口测试
- 埃夫特机器人离线编程软件_工业机器人离线编程与虚拟仿真软件
- Jquery API帮助文档 chm
- 游戏美术和策划,你感兴趣吗
- api 接口响应数据格式有哪些
- 华为云人脸识别服务 FRS 之初体验
- vue run dev报错 缺少package.json文件、missing dev 命令 解决办法
- 计算机控制闪光灯,并联控制式自动调光闪光灯 - 最全的照相机闪光灯电路图大全(十款照相机闪光灯电路图详解)...
- python 识别登陆验证码图片(完整代码)
- Android Zenmode/DND(勿扰模式) 实现原理剖析
- 中国各省份省会地图json数据
- 关于Vue在面试中常常被提到的几点(持续更新……)