elementui实现当前页全选+所有全选+翻页保持选中状

原文来自:https://blog.csdn.net/sumimg/article/details/121693305?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-121693305-blog-127570059.235%5Ev38%5Epc_relevant_anti_t3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-121693305-blog-127570059.235%5Ev38%5Epc_relevant_anti_t3&utm_relevant_index=2
//代码可直接复制看效果,
<template><div><div class="common-wrapper"><el-checkboxv-model="allCheck":indeterminate="indeterminate"label="全选"@change="handleCheck"/><!--列表--><el-tableref="table"v-loading="listLoading":data="lists"highlight-current-rowstyle="width: 100%":row-key="getRowKeys"@select="handleSelectRow"@select-all="handleSelectAll"><el-table-column type="selection" :reserve-selection="true" /><el-table-column prop="id" label="id" /><el-table-column prop="time" label="time" /></el-table><!--工具条--><el-col :span="24" class="toolbar"><el-pagination:current-page="this.page"layout="total , prev, pager, next":page-size="10":total="total"style="float: right"@current-change="handleCurrentChange"/></el-col><div class="clearfix" /></div></div>
</template><script>
export default {data() {return {lists: [{ id: "1", time: "2019-09-09 12:12:12" },{ id: "2", time: "2019-09-09 12:12:12" },{ id: "3", time: "2019-09-09 12:12:12" },{ id: "4", time: "2019-09-09 12:12:12" },{ id: "5", time: "2019-09-09 12:12:12" },{ id: "6", time: "2019-09-09 12:12:12" },{ id: "7", time: "2019-09-09 12:12:12" },{ id: "8", time: "2019-09-09 12:12:12" },{ id: "9", time: "2019-09-09 12:12:12" },{ id: "10", time: "2019-09-09 12:12:12" },],total: 13, // 得到的列表总数page: 1,listLoading: false,getRowKeys(row) {return row.id;},checkedList: [], // 选中列表uncheckedList: [], // 未选中列表indeterminate: false, // indeterminate属性控制样式allCheck: false,};},watch: {// 监听列表,如果为所有全选,翻页时保持状态lists: {handler(value) {if (this.allCheck) {if (this.uncheckedList.length === 0) {this.$nextTick(() => {// 这里一定要用$nextTickvalue.forEach((row) => {this.$refs.table.toggleRowSelection(row, true);});});} else {this.$nextTick(() => {value.forEach((row) => {for (let i = 0; i < this.uncheckedList.length; i++) {if (row.id === this.uncheckedList[i].id) {this.$refs.table.toggleRowSelection(row, false);break;} else {this.$refs.table.toggleRowSelection(row, true);}}});});}}},deep: true,},// 监听未选中的数组uncheckedList: {handler(value) {// 1.未选中数组长度和总数相等,取消选中状态,取消样式if (value.length === this.total) {this.allCheck = false;this.indeterminate = false;}// 2.未选中数组长度为0,取消样式if (value.length === 0) {this.indeterminate = false;}},deep: true,},// 监听选中数组checkedList: {handler(value) {// 选中数组长度等于总数,代表全部选中,取消样式if (value.length === this.total) {this.allCheck = true;this.indeterminate = false;}},},},mounted() {},methods: {handleSelectRow(rows, row) {// 单行选择if (this.allCheck) {// 多选框样式改变,allCheck依然为true,为了保持翻页状态this.indeterminate = true;// 判断勾选数据行是选中还是取消const selected = rows.length && rows.indexOf(row) !== -1;const lenFalse = this.uncheckedList.length;if (selected) {// 选中,从未选中数组中去掉if (lenFalse !== 0) {//for (let i = 0; i < lenFalse; i++) {if (this.uncheckedList[i].id === row.id) {this.uncheckedList.splice(i, 1);break;}}}} else {// 取消,当前取消的行push进去this.uncheckedList.push(row);}console.log(this.uncheckedList);} else {this.checkedList = rows;console.log(this.checkedList);}},handleSelectAll(rows) {if (this.allCheck) {this.indeterminate = true;const lenNow = this.lists.length;// 判断全选本页,是选中还是取消if (rows.indexOf(this.lists[0]) !== -1) {// 如果选中所有rows存在于tableList,或者判断rows长度不为0 证明是选中状态// uncheckedList要删除当前页tableListfor (let i = 0; i < lenNow; i++) {for (let n = 0; n < this.uncheckedList.length; n++) {if (this.uncheckedList[n].id === this.lists[i].id) {this.uncheckedList.splice(n, 1);}}}} else {// 取消 如果rows为空,当页是取消状态for (let j = 0; j < lenNow; j++) {if (this.uncheckedList.length !== 0) {// 如果uncheckedList已经有值if (this.uncheckedList.indexOf(this.lists[j]) === -1) {// 就把uncheckedList中没有的当前页tableList,push进去this.uncheckedList.push(this.lists[j]);}} else {// 如果为空,直接全部pushthis.uncheckedList.push(this.lists[j]);}}}} else {this.checkedList = rows;}},handleCheck() {if (this.indeterminate) {// 当不为全选样式时,点击变为全选this.allCheck = true;}// 只要点击了全选所有,这两个数组清空this.uncheckedList = [];this.checkedList = [];if (this.allCheck) {// 全选所有,列表全部选中,包括翻页this.lists.forEach((row) => {this.$refs.table.toggleRowSelection(row, true);});} else {// 取消列表全选状态,包括翻页this.$refs.table.clearSelection();}},// 分页handleCurrentChange(val) {this.page = val;if (val === 1) {this.lists = [{ id: "1", time: "2019-09-09 12:12:12" },{ id: "2", time: "2019-09-09 12:12:12" },{ id: "3", time: "2019-09-09 12:12:12" },{ id: "4", time: "2019-09-09 12:12:12" },{ id: "5", time: "2019-09-09 12:12:12" },{ id: "6", time: "2019-09-09 12:12:12" },{ id: "7", time: "2019-09-09 12:12:12" },{ id: "8", time: "2019-09-09 12:12:12" },{ id: "9", time: "2019-09-09 12:12:12" },{ id: "10", time: "2019-09-09 12:12:12" },];} else {this.lists = [{ id: "11", time: "2019-09-09 12:12:12" },{ id: "12", time: "2019-09-09 12:12:12" },{ id: "13", time: "2019-09-09 12:12:12" },];}},// tableList 为当前表格的数据checkPageStatus(lists) {lists.forEach((row) => {const findex = this.saveCheckList.findIndex((item) => {return item.id === row.id;});console.log("checkPageStatus", findex);if (findex >= 0) {this.$nextTick(() => {this.$refs["table"].toggleRowSelection(row);});}});},// 当表格是在弹出窗再作展示时,再次编辑多选的值时,是需要回显之前勾选的状态。// 一、加载表格数据展示,案例用模拟数据,开发需要调用接口getList() {// this.lists = res.data.data// this.total = res.data.count// this.$nextTick(() => {// // console.log(this.lists)// // 每一次执行数据请求的方法时,在请求成功的方法里执行回显// this.checkedList.forEach((key) => {// this.lists.forEach((row) => {// if (row.id == key.id) {// this.$refs.table.toggleRowSelection(row, true)// }// })// })// }},},
};
</script>相关文章:
elementui实现当前页全选+所有全选+翻页保持选中状
原文来自:https://blog.csdn.net/sumimg/article/details/121693305?spm1001.2101.3001.6650.1&utm_mediumdistribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-121693305-blog-127570059.235%5Ev38%5Epc_relevant_anti_t3&depth_1-utm…...
Opencv项目实战:24 石头剪刀布
目录 0、项目介绍 1、效果展示 2、项目搭建 3、项目代码展示与部分讲解 pyzjr库...
Qt--QPlugin插件
写在前面 Qt–动态链接库一文中提到,动态方式加载dll只能加载 extern "C“ 的导出函数,而无法加载类,因此可以使用Qt提供的插件来实现导出类的动态加载。 QPlugin是Qt插件框架的一部分,是一种轻量级的插件系统,…...
公会发展计划 (GAP) 第 4 季:塑造 YGG 的成就版图
基于前三个赛季所取得的成果,Yield Guild Games(YGG)自豪地宣布推出 公会发展计划(GAP)第 4 季。公会最近的一些精英成员将在本季加入公会,公会成员将在全新的任务中磨练自己的技能,建立自己在 …...
ExpressJS教程_编程入门自学教程_菜鸟教程-免费教程分享
教程简介 Express是基于Node.js平台,快速、开放、极简的Web开发框架;通俗的理解:Express的作用和Node.js内置的http模块类似,是专门用来创建Web服务器的;Express的本质:就是一个npm上的第三方包,提供了快速创建Web服务器的便捷方法。ExpressJS是一个Web…...
时序预测 | MATLAB实现BO-BiLSTM贝叶斯优化双向长短期记忆神经网络时间序列预测
时序预测 | MATLAB实现BO-BiLSTM贝叶斯优化双向长短期记忆神经网络时间序列预测 目录 时序预测 | MATLAB实现BO-BiLSTM贝叶斯优化双向长短期记忆神经网络时间序列预测效果一览基本介绍模型搭建程序设计参考资料 效果一览 基本介绍 MATLAB实现BO-BiLSTM贝叶斯优化双向长短期记忆…...
HIVE优化之不需要参数优化
#1.数据倾斜 什么是数据倾斜? 一部分数据多 一部分数据少 造成的结果: MR运行过慢 主要是shuffle和reduce过程慢 分组聚合导致数据倾斜 Hive未优化的分组聚合 方法1:在MAP端直接聚合(分组聚合优化),减少…...
前端 select 标签如何创建下拉菜单?
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 代码示例⭐ 代码讲解⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏…...
基于 eclipse-temurin 构建国内时区,地区,语言的docker镜像
基于 eclipse-temurin 构建国内时区,地区,语言的镜像 使用场景自定Dockerfile构建自己的基础镜像构建本地镜像推送远程仓库 使用场景 在给应用构建自定义镜像时,往往需要在每次构建时去调整时区,地区这些东西;每次构建…...
RunnerGo配置场景时接口模式该怎么选
在进行性能测试时,测试场景的正确配置非常关键。首先,需要根据业务场景和需求,设计出合理的测试场景,再利用相应的工具进行配置,实现自动化的性能测试。 在JMeter中,用户需要自己组织测试场景,…...
系统分享UIActivity
iOS自带的分享控件可以完成绝大部分的分享需求。 它可以不需要集成微信、QQ等第三方SDK就可以实现分享(需要在弹出视图里面点击更多打开开关)到微信好友、朋友圈等,功能很强大,也很方便。 一、系统分享两个步骤 UIActivity配置分享的内容和…...
常用抓包工具
Fiddler Fiddler 是一个很好用的抓包工具,可以用于抓取http/https的数据包,常用于Windows系统的抓包,它有个优势就是免费 Charles Charles是由JAVA开发的,可以运行在window Linux MacOS,但它是收费的,和…...
自然语言处理学习笔记(五)————切分算法
目录 1.切分算法 2.完全切分 3.正向最长匹配 4.逆向最长匹配 5.双向最长匹配 6.速度评测 1.切分算法 词典确定后,句子可能含有很多词典中的词语,他们有可能互相重叠,如何切分需要一些规则。常用规则为:正向匹配算法、逆向匹…...
SQL-方法论
写SQL时可以考虑的手段: 行转列 先分为多个临时表,然后JOIN到一起 select uid,t1.name YuWen,t2.name ShuXue from (select uid,namefrom tableAwhere naem 语文) t1join (select uid,namefrom tableAwhere naem 数学) t2on t1.uid t2.uid; 用sum(if…...
[Python从零到壹] 六十八.图像识别及经典案例篇之图像特效(毛玻璃、浮雕、油漆和模糊特效变换)
八月太忙,还是写一篇吧! 欢迎大家来到“Python从零到壹”,在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解,真心想把自己近十年的编程经验分享给大家,希望对您有所帮助,文章中不足…...
undefined与null的区别
null 表示一个对象被定义了,值为“空值” undefined 表示不存在这个值 1.undefined typeof undefined //"undefined" undefined 是一个表示"无"的原始值或者说表示"缺少值",就是此处应该有一个值,但还没有…...
Unity之获取用户地理位置
1.直接利用三方API获取: 1.1 利用bilibili的api 【未知稳定性】 public void Awake() {StartCoroutine(GetLocationInfoNew());}/// <summary>/// 利用bilibili的接口通过ip直接获取城市信息/// </summary>IEnumerator GetLocationInfoNew() {//UnityWebRequest …...
TC3XX - MCAL知识点(二十):CAN MCAL配置及代码实战(CAN/CANFD/extenen CAN)
目录 1、概述 2、MCAL配置 2.1、实验目标 2.2、CAN配置(包含CAN与CANFD) 2.2.1、CanGeneral...
QT生成Debug和Release发布版后,运行exe缺少dll问题
在QT Creator生成debug和release的exe执行文件后,运行时,报错缺少*.dll.解决办法1: 在系统环境变量中添加D:\Qt\Qt5.13.2\Tools\mingw730_64\bin后,即可运行。 当使用此方法时,将exe拷贝到其他电脑中运行时,…...
企业进销存管理流程有哪些? 附进销存管理系统
阅读本文,您可以了解:1、进销存的定义;2、进销存的流程 首先,在了解进销存流程之前,我们必须厘清一个问题? 什么是进销存? 进销存是一个企业管理中常用的术语,是指企业在经营过程中…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
MVC 数据库
MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...
第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代,智能代理(agents)不再是孤立的个体,而是能够像一个数字团队一样协作。然而,当前 AI 生态系统的碎片化阻碍了这一愿景的实现,导致了“AI 巴别塔问题”——不同代理之间…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
多种风格导航菜单 HTML 实现(附源码)
下面我将为您展示 6 种不同风格的导航菜单实现,每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
