element el-table表格切换分页保留分页数据+限制多选数量

el-table表格并没有相关的方法来禁用表头里面的多选按钮

在这里插入图片描述

那么我们可以另辟蹊径,来实现相同的多选+切换分页(保留分页数据)+ 限制多选数量的效果

<el-table
    :data="tableData"
    style="width: 100%">
    // 不使用el-talbe自带的多选功能
    //<el-table-column type="selection" width="55"></el-table-column>

	//自己单独建一个el-table-column 来设置选中状态
	<el-table-column fixed width="60">
       <template slot-scope="scope">
           <el-checkbox v-model="scope.row.isCheck"
              :disabled="selectable(scope.row)"
              @change="checkChange($event, scope.$index, scope.row)">
         </el-checkbox>
     </template>
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
</el-table>
//在获取表格数据以后 遍历表格,为每行数据添加上 isCheck 属性,并设置默认值false
this.tableData.forEach(item =>{
	item.isCheck = false;
})

实现多选功能 checkChange

 //事件有三个参数  
 // val el-checkbox change事件返回的值 代表 选中/不选中
 // index 当前tableData 所在的行
 // row 当前tableData 当前行的数据
 checkChange(val, index, row) {
 	  //通过val true/false ;来判断是 选中当前行/取消选中当前行
      if (val) {
        //选中 往多选数组里面推送
        this.multipleSelection.push(row);
      } else {
        //取消选中(删除) 拿到当前数据的唯一标识id 
        const { id } = row;
        let delIndex = this.multipleSelection.findIndex(
          (item) => item.id=== id
        );
        //删除 取消选中的数据
        if (delIndex !== -1) {
          this.multipleSelection.splice(delIndex, 1);
        }
      }
	  //重新设置 表格当前行的多选状态
      this.$set(this.tableData, index, { ...row, isCheck: !!val });
    },

实现 限制多选数量的功能 selectable(scope.row)

//我们在最上面的实例中定义了一个 el-checkbox的禁用方法  :disabled="selectable(scope.row)"

//限制最多只能选择5个
// 方法返回 true/false 来实现el-checkbox的禁用/选中功能
selectable(row) {
	  //限制多选最多只能选择5个
	  let limitNum = 5
      let ids = this.multipleSelection.map((item) => item.id);
      //判断当前行的唯一标识符 id,是否存在于多选数组中
      if (ids.includes(row.id)) {
        // 已选择的行,可取消禁用
        return false;
      } else if (ids.length >= limitNum  && !ids.includes(row.coilNo)) {
        // 超过最大选择条数,且当前行未被选中时,禁用
        return true;
      } else {
        // 其他情况下可选 取消禁用
        return false;
      }
}

实现切换分页保留分页数据功能

//获取表格数据
getTableData(){
	//模拟数据获取
	this.tableData = res.data || []

	//判断选中数组是否有值 有值(执行回显选中数据功能)
	if (this.multipleSelection.length > 0) {
         this.echoMultiple();
     }
}

//回显多选值
echoMultiple() {
	  //增加校验 如果当前tableData没有值 就不回显选中数据
      if (this.multipleSelection.length === 0 || this.tableData.length === 0) {
        return;
      }

      let ids = this.multipleSelection.map((item) => item.id) || [];
      this.tableData.forEach((item, index) => {
      	//遍历 tableData数值 找出符合要求的id
        if (ids.includes(item.id)) {
          // 为符合回显要求的数据 设置选中状态
          this.$set(this.tableData, index, { ...item, isCheck: true });
        }
      });
	  //避免视图不刷新 强制刷新视图
      this.$forceUpdate();
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/762065.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

EDI是什么?与ERP有何关系

EDI的发展过程 电子数据交换&#xff08;Electronic Data Interchange&#xff0c;EDI&#xff09;是一种通过电子方式传输商业文件的技术。EDI的历史可以追溯到20世纪60年代&#xff0c;当时企业开始使用计算机进行数据处理。最早的EDI系统是为解决大型企业间的信息交换问题而…

微信AI机器人智能助手:利用大模型定制训练知识库

随着人工智能技术的迅速发展&#xff0c;AI已经渗透到了我们生活得方方面面。AI文本撰写、AI绘画、AI生成视频、AI换脸等各类应用层出不穷。作为领先的创新人工智能和元宇宙厂商&#xff0c;道可云凭借自身在人工智能、元宇宙、虚拟数字人等领域的技术积累&#xff0c;将AI技术…

文本超长省略的几种方式(vue)

第一种&#xff0c;纯css 在给容器设置宽度后&#xff0c;使用css来省略文本超长部分&#xff0c;但是这样就看不到全部的内容 <template><div class"content"><div class"text">{{ text }}</div></div> </template>&…

Vue3 登录成功,浏览器存在toke,再次访问/login路由到/index 首页页面

文章目录 目录 文章目录 流程 小结 概要流程技术细节小结 概要 首先需要清楚知道浏览器localstorage和Session storage的区别 localStorage 和 sessionStorage 是 HTML5 提供的两种客户端存储数据的方法&#xff0c;它们在使用和生命周期上有一些区别&#xff1a; 1. 生命周期…

1.回溯算法.题目

1.回溯算法.题目 题目9.子集问题10.子集||11.递增子序列12.全排列13.全排列||14.回溯算法去重问题的另外一个写法15.重新安排行程16.N皇后 总结去重方式的不同 题目 9.子集问题 &#xff08;题目链接&#xff09; 给定一组不含重复元素的整数数组 nums&#xff0c;返回该数组…

宝塔linux网站迁移步骤

网站迁移到新服务器步骤 1.宝塔网站迁移&#xff0c;有个一键迁移工具&#xff0c;参考官网 宝塔一键迁移API版本 3.0版本教程 - Linux面板 - 宝塔面板论坛 (bt.cn)2 2.修改域名解析为新ip 3.如果网站没有域名&#xff0c;而是用ip访问的&#xff0c;则新宝塔数据库的wp_o…

mysql主键自增连续新增时报错主键重复-Duplicate entry “x” for key PRIMARY

mysql主键自增连续新增时报错主键重复 1、mysql数据库设置数据库主键自增的规律 id -- AUTO_INCREMENT2、可视化工具查看自增没问题 3、问题描述 新增第一个时操作成功&#xff0c;新增第二个时候操作失败报错&#xff1a; Duplicate entry “x” for key PRIMARY4、分析&a…

[BUUCTF从零单排] Web方向 02.Web入门篇之『常见的搜集』解题思路(dirsearch工具详解)

这是作者新开的一个专栏《BUUCTF从零单排》&#xff0c;旨在从零学习CTF知识&#xff0c;方便更多初学者了解各种类型的安全题目&#xff0c;后续分享一定程度会对不同类型的题目进行总结&#xff0c;并结合CTF书籍和真实案例实践&#xff0c;希望对您有所帮助。当然&#xff0…

手把手教你考下39张免费亚马逊AWS证书和学习徽章

小李哥目前共考了39项亚马逊云(AWS)徽章&#xff0c;这也是普通用户可考的全部徽章。这篇文章会介绍如何报名、复习、通过这39张徽章提升云计算基本技能&#xff0c;了解全球第一大云厂亚马逊云科技前沿技术。这篇文章在领英爆&#x1f525;&#xff0c;有将近100k浏览量和11k的…

Linux:系统安全及应用

目录 一、系统账号管理 1.1、系统账号清理 1.2、密码安全控制 1.3、命令历史限制 二、限制su命令用户 三、PAM安全认证 四、sudo机制提升权限 4.1、sudo机制介绍 4.2、用户别名案例 4.3、启用sudo操作日志 4.4、其他案列sudo 4.5、开关机安全控制 4.6、限制更改GR…

root密码忘了怎么办(从系统引导过程解决)

目录 1.Linux系统密码忘记 2.系统引导过程 2.1 systemd 2.2 GRUB和GRUB2 2.3 运行级别 3.修复MBR扇区故障和GRUB引导故障 3.1 MBR扇区故障 3.2 GRUB引导故障 1.Linux系统密码忘记 我们在生活中经常遇到这类困扰&#xff0c;就是某个账号还是账户密码忘了&#xff0c;这…

Docker 部署 Nacos v2.3.2 版本

文章目录 Github官网文档Nacos 生态图Nacos Dockerdocker-compose.ymlapplication.propertiesNacos 官方示例 Github https://github.com/alibaba/nacos 官网 https://nacos.io/ 文档 https://nacos.io/docs/latest/what-is-nacos/ Nacos 生态图 Nacos Docker 镜像&…

《信创数据库沙龙上海站:共话发展,智启未来》

2024 年 6 月 29 日周六 14:00&#xff0c;信创数据库沙龙在上海市徐汇区建国西路 285 号科投大厦 13 楼金星厅成功举办。本次活动吸引了众多学术界和产业界的专家、学者以及技术爱好者参与。 活动中&#xff0c;多位嘉宾带来了精彩分享。薛晓刚探讨了 Oracle 在国内的前景&a…

Java全套智慧校园系统源码:微信小程序+电子班牌 让教育更智能化的一套数字化校园管理系统源码

Java全套智慧校园系统源码&#xff1a;微信小程序电子班牌 让教育更智能化的一套数字化校园管理系统源码 智慧校园管理系统是一种利用科技手段优化学校教育和管理的平台。它可以涵盖多个方面&#xff0c;例如教学、管理、服务等。其中包括智能化教室、智慧校园卡、校园安全监控…

基于flask的闪现、g对象、蓝图

【 一 】闪现&#xff08;flash&#xff09; # 1 flask中得闪现存放数据的地方&#xff0c;一旦取了&#xff0c;数据就没了-实现跨请求间传递数据 # 2 django中有没有类似的东西&#xff1f;message 消息框架# 3 基本使用1 设置&#xff1a;flash(欢迎你、欢迎来到澳门赌场&a…

Dns被莫名篡改的问题定位(笔记)

引言&#xff1a;最近发现用户的多台机器上出现了Dns被莫名修改的问题&#xff0c;从系统事件上看并未能正常确定到是那个具体软件所为&#xff0c;现在的需求就是确定和定位哪个软件具体所为。 解决思路&#xff1a; 首先到IPv4设置页面对Dns进行设置&#xff1a;通过ProcExp…

昇思25天学习打卡营第8天|MindSpore-SSD目标检测

SSD目标检测介绍 SSD,全称Single Shot MultiBox Detector,是Wei Liu在ECCV 2016上提出的一种目标检测算法。使用Nvidia Titan X在VOC 2007测试集上,SSD对于输入尺寸300x300的网络,达到74.3%mAP(mean Average Precision)以及59FPS;对于512x512的网络,达到了76.9%mAP ,超…

短视频电商源码怎么选择

随着移动互联网的迅猛发展&#xff0c;短视频电商成为了一种热门的商业模式。很多商家和创业者都希望能够快速搭建一个短视频电商平台来推广和销售自己的产品。然而&#xff0c;选择合适的短视频电商源码并不是一件容易的事情。在选择之前&#xff0c;有一些关键因素需要考虑。…

STC8/32 软硬件I2C通讯方式扫描I2C设备地址

STC8/32 软硬件I2C通讯方式扫描I2C设备地址 📄主要用于检测挂载在I2C总线上的设备。在驱动I2C设备之前,如果能扫描到该设备,说明通讯设备可以连接的上,在提前未知I2C地址的情况下,可以方便后面的驱动代码的完善。 🔬扫描测试效果:(测试mpu6050以及ssd1306 i2c oled )…

本科学历|艺术创业公司经理限定美国西部访问学者申请成功

U经理属于自费访学&#xff0c;本科学历&#xff0c;无文章及课题&#xff0c;但有较丰富的艺术创意及艺术教育实际操作经验&#xff0c;要求申美国西部地区的学校。最终我们为其获得俄勒冈州立大学访问学者邀请函。之前拟定的申请设想全部实现&#xff1a;西部地区、专业契合、…