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

news2024/11/16 18:08:33

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();
    }

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DX-11A信号继电器 0.5A 柜内板前接线 约瑟JOSEF

DX-11,11A,11B,11C型信号继电器 DX-11信号继电器 DX-11B信号继电器 DX-11A信号继电器 DX-11C信号继电器 1 用途 该继电器用于直流操作的保护线路中&#xff0c;作为信号指示器。 2 结构和原理 该继电器具有电磁铁和带公共点的三付动合触点及一个信号牌&#xff0c;为电…

什么是原始权益人?

摘要&#xff1a;每天学习一点金融小知识 原始权益人&#xff0c;在资产证券化&#xff08;ABS&#xff09;和公募REITs等金融产品中&#xff0c;指的是证券化基础资产的原始所有者&#xff0c;即金融产品的真正融资方。他们是按照相关规定及约定向资产支持专项计划转移其合法拥…

Victor CMS v1.0 SQL 注入漏洞(CVE-2022-28060)

前言 CVE-2022-28060 是 Victor CMS v1.0 中的一个SQL注入漏洞。该漏洞存在于 /includes/login.php 文件中的 user_name 参数。攻击者可以通过发送特制的 SQL 语句&#xff0c;利用这个漏洞执行未授权的数据库操作&#xff0c;从而访问或修改数据库中的敏感信息。 漏洞详细信…

武汉星起航:跨境电商流量红利爆发,2023年出海企业迎突破增长

在数字时代的浪潮中&#xff0c;中国跨境电商以惊人的爆发力崭露头角&#xff0c;成为全球贸易的璀璨新星。2023年数据显示&#xff0c;跨境电商出口额高达1.83万亿元&#xff0c;同比增长19.6%&#xff0c;这一显著增速不仅刷新纪录&#xff0c;更为众多出海企业带来了前所未有…

MySQL-行级锁(行锁、间隙锁、临键锁)

文章目录 1、介绍2、查看意向锁及行锁的加锁情况3、行锁的演示3.1、普通的select语句&#xff0c;执行时&#xff0c;不会加锁3.2、select * from stu where id 1 lock in share mode;3.3、共享锁与共享锁之间兼容。3.4、共享锁与排他锁之间互斥。3.5、排它锁与排他锁之间互斥3…

TopK问题与如何在有限内存找出前几最大(小)项(纯c语言版)

目录 0.前言 1.知识准备 2.实现 1.首先是必要的HeapSort 2.造数据 其他注意事项 3.TopK的实现 0.前言 在我们的日常生活中总有排名系统&#xff0c;找出前第k个分数最高的人&#xff0c;而现在让我们用堆来在有限内存中进行实现 1.知识准备 想要实现topk问题首先我们要…

【stm32】大一上学期笔记复制

砌墙单片机 外设是什么&#xff1f; ipage 8 nx轴 128 X0-127 y0-63 PWM脉冲宽度调制 PWM脉冲宽度调制 2023年10月13日 基本特性&#xff1a;脉冲宽度调制PWM是一种对模拟信号进行数字编码的方法。广泛引用于电机控制&#xff0c;灯光的亮度调节&#xff0c;功率控制等领域…

科普文:一文搞懂jvm原理(二)类加载器

概叙 科普文&#xff1a;一文搞懂jvm(一)jvm概叙-CSDN博客 前面我们介绍了jvm&#xff0c;jvm主要包括两个子系统和两个组件&#xff1a; Class loader(类装载器) 子系统&#xff0c;Execution engine(执行引擎) 子系统&#xff1b;Runtime data area (运行时数据区域)组件&am…

类和对象【上】【C++】

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;LiUEEEEE                        …

试用笔记之-收钱吧安卓版演示源代码,收钱吧手机版感受

首先下载&#xff1a; https://download.csdn.net/download/tjsoft/89499105 安卓手机安装 如果有收钱吧帐号输入收钱吧帐号和密码。 如果没有收钱吧帐号点我的注册 登录收钱吧帐号后就可以把手机当成收钱吧POS机用了&#xff0c;还可以扫客服的付款码哦 源代码技术交流QQ:42…

Nuxt3 的生命周期和钩子函数(七)

title: Nuxt3 的生命周期和钩子函数&#xff08;七&#xff09; date: 2024/6/30 updated: 2024/6/30 author: cmdragon excerpt: 摘要&#xff1a;文章阐述了Nuxt3中Nitro生命周期钩子的使用&#xff0c;如nitro:config自定义配置、nitro:init注册构建钩子、nitro:build:be…

Python自动化,实现自动登录并爬取商品数据,实现数据可视化

关于如何使用Python自动化登录天 猫并爬取商品数据的指南&#xff0c;我们需要明确这是一个涉及多个步骤的复杂过程&#xff0c;且需要考虑到天猫的反爬虫策略。以下是一个简化的步骤指南&#xff1a; 步骤一&#xff1a;准备工作 环境准备&#xff1a;确保你的Python环境已经…

数据沿袭是止痛药还是维生素?

首先&#xff0c;这在很大程度上取决于用户组织当前的使用案例及其成熟度。 在我看来&#xff0c;数据工程师喜欢查看数据流并对依赖关系有直观的了解&#xff0c;但他们最终真的会使用数据沿袭吗&#xff1f;使用频率是多少&#xff1f;具体用例是什么&#xff1f; 从我们的观…

<电力行业> - 《第12课:配电(2)》

5 配网的指标 配电网与广大用户紧密联系&#xff0c;所以配电网是否合格还是十分重要的。 评判配电网的标准&#xff0c;主要有四个指标&#xff1a; 供电可靠性&#xff1a;供电可靠性是指针对用户连续供电的可靠程度。网损率&#xff1a;网损率可定义为电力网的电能损耗量与…

问题-小技巧-专业版Win11怎么启动电脑的休眠模式?

专业版Win11怎么启动电脑的休眠模式&#xff1f; powercfg -a powercfg -hibernate on 启用管理员面板依次输入上述命令就可以了。

短视频电商源码怎么选择

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

控制器方法执行流程和 @InitBinder【Spring源码学习】

控制器方法执行流程 InitBinder 加在ControllerAdvice中 首先说明ControllerAdvice和aop没有任何关系&#xff01; 加在ControllerAdvice中只对所有控制器都生效 全局的在开始时就会保存到handlerMappingAdapter中的cache中&#xff1b; 加在Controller中 加在controller中只对…

小程序使用echarts和echarts配置项总结(全网最简单详细)

文章目录 概要小程序中使用echarts1. ec-canvas2. 下载项目3. 去echarts官网定制&#xff1a;4.点击下载5.引入使用 echarts的option配置知识点归纳整理&#xff08;还在更新&#xff09;&#xff1a;小结 概要 小程序中使用echarts&#xff08;简单详细&#xff09; 小程序中…

redis,memcached,nginx网络组件

课程目标&#xff1a; 1.网络模块要处理哪些事情 2.reactor是怎么处理这些事情的 3.reactor怎么封装 4.网络模块与业务逻辑的关系 5.怎么优化reactor? io函数 函数调用 都有两个作用&#xff1a;io检测 是否就绪 io操作 1. int clientfd accept(listenfd, &addr, &l…

[论文精读]Variational Graph Auto-Encoders

论文网址&#xff1a;[1611.07308] Variational Graph Auto-Encoders (arxiv.org) 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎…