element el-table 表格限制多选个数

news2025/3/18 2:57:17

本次的功能的要求是:

  1. 原本的引入的elment + 的表格,去除全选框,
  2. 版本对比的按钮,需要在选择版本,并且版本个数为2的时候,可点击,进行版本对比操作
  3. 每次选择版本的时候,目前已有两个选择的版本,选择第三个的时候,把第一个版本取消勾选

 

//tabel表格相关代码
	<div class="top layout-start margin_b_10">
      <el-button
        color="#255EFF"
        @click="compare"
        :disabled="compareFileArr.data.length !== 2"
        >版本对比</el-button
      >
      <span>(请选择两个文件版本进行对比)</span>
    </div>

    <el-table
      ref="multipleTableRef"
      @select="select"
      :data="tableData"
      style="width: 100%"
      :header-cell-class-name="cellClass"
      :header-cell-style="{ background: '#F3F3F3' }"
      border
    >
      <el-table-column type="selection" align="center" width="50" />
      <el-table-column label="版本" show-overflow-tooltip>
        <template #default="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column property="address" label="md5" width="100" />
      <el-table-column property="address" label="状态" width="100" />
      <el-table-column property="address" label="发布描述" width="100" />
      <el-table-column property="date" label="最后更新时间" width="200" />
      <el-table-column property="address" label="最后更新人" width="100" />
      <el-table-column property="操作" width="300" align="center">
        <template #default>
          <div>
            <el-button link type="primary" size="small">编辑</el-button>
            <el-button link type="primary" size="small">回退</el-button>
            <el-button link type="primary" size="small">下载</el-button>
          </div>
          <div>
            <el-button link type="primary" size="small">设置全服标签</el-button>
            <el-button link type="primary" size="small"
              >添加到待发布配置</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>


// 当用户手动勾选数据行的 Checkbox 时触发的事件
select(selections, row) {
  // 选择项大于2时
  if (selections.length > selectionMax) {
    // 把数组的第一个元素从其中删除
    let del_row = selections.shift();
    // 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
    this.$refsmultipleTableRef.toggleRowSelection(del_row, false);
    compareFileArr.data = selections;
  } else {
    compareFileArr.data = selections;
  }
}

::v-deep .el-table__header-wrapper  .el-checkbox{
	display:none
}

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

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

相关文章

【C语言】—— 指针二 : 初识指针(下)

【C语言】——函数栈帧 一、 c o n s t const const 修饰指针1.1、 c o n s t const const 修饰变量1.2、 c o n s t const const 修饰指针 二、野指针2.1野指针的成因&#xff08;1&#xff09;指针未初始化&#xff08;2&#xff09;指针越界访问&#xff08;3&#xff09;指…

Hardness of Scheme-Switching and Comparison in FHE

参考文献&#xff1a; [AP13] Alperin-Sheriffff, J., Peikert, C.: Practical bootstrapping in quasilinear time. In: Canetti, R., Garay, J.A. (eds.) CRYPTO 2013. LNCS, vol. 8042, pp. 1–20. Springer, Heidelberg (2013). https://doi.org/10.1007/978-3-642-40041-…

微服务初识

1.认识微服务 随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢&#xff1f; 1.1.单体架构 单体架构&#xff1a;将业务的所有功能集中在一个项目中开发&#xff0c;打…

Qt4 设计师自定义控件----写好qmake文件,无需额外拷贝

前言 浏览了很多帖子&#xff0c;看了很多博主的教程&#xff0c;每一个都写的很好&#xff0c;美中不足的是。Qt在每次自定义插件时都需要拷贝&#xff0c;如果能够利用qmake install拷贝功能就很完美了&#xff0c;在其他人使用的时候只要简单的几个步骤就能轻松的用起来&am…

点餐平台网站|基于springboot框架+ Mysql+Java+Tomcat的点餐平台网站设计与实现(可运行源码+数据库+设计文档+部署说明)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 前台功能效果图 管理员功能登录前台功能效果图 用户功能实现 系统功能设计 数据库E-R图设计 lunwen参…

R语言数据挖掘-关联规则挖掘(1)

一、分析目的和数据集描述 要分析的数据是美国一区域的保险费支出的历史数据。保险费用数据表的每列分别为年龄、性别、体重指数、孩子数量、是否吸烟、所在区域、保险收费。 本文的主要目的是分析在年龄、性别、体重指数、孩子数量、是否吸烟、所在区域中这些因素中&#xf…

【PTA】L1-039 古风排版(C++)

题目链接&#xff1a;L1-039 古风排版 - 团体程序设计天梯赛-练习集 (pintia.cn) 目录&#xff1a; 目录&#xff1a; 题目要求&#xff1a; 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&#xff1a; 输出样例&#xff1a; 思路&#xff1a; 代码&#xff1a; 测试结…

【四 (4)数据可视化之 Ploty Express常用图表及代码实现 】

目录 文章导航一、介绍二、安装Plotly Express三、导入Plotly Express四、占比类图表1、饼图2、环形图3、堆叠条形图4、百分比堆叠条形图 五、比较排序类1、条形图2、漏斗图3、面积漏斗图 六、趋势类图表1、折线图2、多图例折线图3、分列折线图4、面积图5、多图例面积图 七、频…

解锁区块链游戏数据解决方案

作者&#xff1a;stellafootprint.network 随着区块链技术的日新月异&#xff0c;游戏行业正迎来一场革命&#xff0c;催生了区块链游戏的崛起。这一变革不仅为用户带来了全新的互动体验&#xff0c;也开辟了全新的盈利渠道。然而&#xff0c;在这一新兴领域&#xff0c;数据的…

程序人生——Java泛型和反射的使用建议

目录 引出泛型和反射建议93&#xff1a;Java的泛型是类型擦除的建议94&#xff1a;不能初始化泛型参数和数组建议95&#xff1a;强制声明泛型的实际类型 建议96&#xff1a;不同的场景使用不同的泛型通配符建议97&#xff1a;警惕泛型是不能协变和逆变的 建议98&#xff1a;建议…

安卓国产百度网盘与国外云盘软件onedrive对比

我更愿意使用国外软件公司的产品&#xff0c;而不是使用国内百度等制作的流氓软件。使用这些国产软件让我不放心&#xff0c;他们占用我的设备大量空间&#xff0c;在我的设备上推送运行各种无用的垃圾功能。瞒着我&#xff0c;做一些我不知道的事情。 百度网盘安装包大小&…

网络层_IP

传输层解决的是传输控制&#xff0c;而实际真正决定数据能否发送到对端的是网络层。网络层是有概率传输&#xff0c;而传输层是可靠性传输。所以传输层网络层就可以做到将数据可靠发送到对端。网络层的常见协议有&#xff1a;IP、ICMP等&#xff0c;其中最重要的是IP协议&#…

HTML、XHTML和HTML5系列对比

目录 HTML HTML的优点&#xff1a; HTML的缺点&#xff1a; 应用场景&#xff1a; XHTML XHTML的优点&#xff1a; XHTML的缺点&#xff1a; 应用场景&#xff1a; HTML5 HTML5的优点&#xff1a; HTML5的缺点&#xff1a; 应用场景&#xff1a; 回首发现&#xff0…

Flutter Inspector 视图调试工具突然不能用了

The embedded browser failed to load. Error: JCEF is not supported in this env or failed to initialize 1、在 Android Studio 的 Help 菜单中&#xff0c;找到 Find Action 2、搜索 boot runtime&#xff0c;找到「Choose Boot Java Runtime for the IDE」选项 3、在「…

串行通信——IIC总结

一.什么是IIC&#xff1f; IIC&#xff08;Inter-Integrated Circuit&#xff09;也称I2C&#xff0c;中文叫集成电路总线。是一个多主从的串行总线&#xff0c;由飞利浦公司发明的通讯总线&#xff0c;属于半双工同步传输类总线&#xff0c;仅由两条线就能完成多机通讯&#…

电竞游戏行业有哪些媒体资源?活动发布会如何宣传?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 电竞游戏行业的媒体资源主要包括&#xff1a;游戏门户网站、综合资讯网站、社交媒体平台、电视和网络直播等。 在电竞游戏行业中&#xff0c;媒体资源是丰富多样的。游戏门户网站如游民…

sql中使用collection返回集合数据

今天在写一个接口时&#xff0c;有两级目录&#xff08;父子关系&#xff09;&#xff0c;接口需要把两级数据以嵌套的形式返回给前端。我这个新手菜鸟一上来就查询两次sql&#xff0c;然后业务中处理嵌套关系&#xff0c;事实这种方法也能达到目的。但主管PR代码时&#xff0c…

【自动驾驶可视化工具】

自动驾驶可视化工具 自动驾驶可视化工具1.百度Apollo的Dreamview:2.Cruise的Worldview:3.Uber的AVS:4.Fglovex Studio: 自动驾驶可视化工具 介绍一下当前主流的自动驾驶可视化工具。 1.百度Apollo的Dreamview: Dreamview是百度Apollo平台开发的一种可视化工具&#xff0c;用…

华为配置中心AP内漫游实验

华为配置中心AP内漫游示例 组网图形 图1 配置中心AP内漫游组网图 配置流程组网需求配置思路数据规划配置注意事项操作步骤配置文件 配置流程 WLAN不同的特性和功能需要在不同类型的模板下进行配置和维护&#xff0c;这些模板统称为WLAN模板&#xff0c;如域管理模板、射频模…

K8S日志收集方案-EFK部署

EFK架构工作流程 部署说明 ECK (Elastic Cloud on Kubernetes)&#xff1a;2.7 Kubernetes&#xff1a;1.23.0 文件准备 crds.yaml 下载地址&#xff1a;https://download.elastic.co/downloads/eck/2.7.0/crds.yaml operator.yaml 下载地址&#xff1a;https://download.e…