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

本次的功能的要求是:

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

 

//tabel表格相关代码<div class="top layout-start margin_b_10"><el-buttoncolor="#255EFF"@click="compare":disabled="compareFileArr.data.length !== 2">版本对比</el-button><span>(请选择两个文件版本进行对比)</span></div><el-tableref="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.mzph.cn/news/747839.shtml

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

相关文章

酷轻松气囊按摩护膝全新上线,科技呵护膝部健康

在快节奏的现代生活中&#xff0c;膝部健康问题逐渐引起人们的重视。长时间的站立、行走或运动&#xff0c;都可能对膝部造成不同程度的压力和损伤。 特别是家里有老人一直被老寒腿、关节发凉疼痛困扰的&#xff0c;经常一遇到下雨天&#xff0c;膝盖就不舒服&#xff1b;尤其到…

鸿蒙-自定义组件的生命周期

目录 自定义组件的生命周期 1.aboutToAppear 2.aboutToDisappear 3.onPageShow 4.onPageHide 5.onBackPress 日志输出 1.显示页面 2.页面点击返回按钮 3.页面跳转 4.页面返回 自定义组件的生命周期 先来一段列子 import router from ohos.router Entry Component…

虚拟机VMware上 centos7 的网络配置

第一步&#xff1a;权限的切换 由普通用户切换到超级用户 用户名为&#xff1a;root 密码为&#xff1a;自己安装 linux 时第一次设置的密码 su -root超级用户的命令提示符是“#”&#xff0c;普通用户的命令提示符是“$”。当看到你的命令提示符为“$”时&#xff0c;证明切…

pytorch之诗词生成6--eval

先上代码&#xff1a; import tensorflow as tf from dataset import tokenizer import settings import utils# 加载训练好的模型 model tf.keras.models.load_model(r"E:\best_model.h5") # 随机生成一首诗 print(utils.generate_random_poetry(tokenizer, model)…

WRF模型教程(ububtu系统)-WPS(WRF Pre-Processing System)概述

一、WPS简介 WRF 预处理系统 (WRF Pre-Processing System&#xff0c;WPS) &#xff0c;集成了基于Fortran和C编写的程序&#xff0c;这些程序主要用于处理输入到real.exe的数据。WPS主要有三个程序和一些辅助程序。 二、各程序介绍 主要的程序为geogrid.exe、ungrib.exe、met…

paddle ocr识别文字

paddle使用 # pip install paddlepaddle2.5.2 -i https://mirror.baidu.com/pypi/simple # pip install paddleocr2.7.0.3 -i https://mirror.baidu.com/pypi/simplefrom paddleocr import PaddleOCR from PIL import Image import numpy as npimage Image.open(./2.png) ocr…

Spring Boot Actuator介绍

大家在yaml中经常见到的这个配置 management: endpoints: web: exposure: #该配置线上需要去掉&#xff0c;会有未授权访问漏洞 include: "*" 他就是Actuator&#xff01; 一、什么是 Actuator Spring Boot Actuator 模块提供了生产级别…

微信小程序--分享如何与ibeacon蓝牙信标建立联系

ibeacon蓝牙设备 iBeacon是苹果公司2013年9月发布的移动设备用OS&#xff08;iOS7&#xff09;上配备的新功能。其工作方式是&#xff0c;配备有 低功耗蓝牙&#xff08;BLE&#xff09;通信功能的设备使用BLE技术向周围发送自己特有的ID&#xff0c;接收到该ID的应用软件会根…

Laravel Class ‘Facade\Ignition\IgnitionServiceProvider‘ not found 解决

Laravel Class Facade\Ignition\IgnitionServiceProvider not found 问题解决 问题 在使用laravel 更新本地依赖环境时&#xff0c;出现报错&#xff0c;如下&#xff1a; 解决 这时候需要更新本地的composer&#xff0c;然后在更新本地依赖环境。 命令如下&#xff1a; co…

19113133262(微信同号)【征稿进行时|见刊、检索快速稳定】2024年区块链、物联网与复合材料与国际学术会议 (ICBITC 2024)

【征稿进行时|见刊、检索快速稳定】2024年区块链、物联网与复合材料与国际学术会议 (ICBITC 2024) 大会主题: (主题包括但不限于, 更多主题请咨询会务组苏老师) 区块链&#xff1a; 区块链技术和系统 分布式一致性算法和协议 块链性能 信息储存系统 区块链可扩展性 区块…

微信小程序将高德地图转为腾讯地图的自行车路线规划

微信小程序后台首页开发设置 相关文档 腾讯后台 微信小程序接入JDK JDK腾讯地图文档 腾讯路线规划文档 核心代码 <map id"myMap" ref"myMap" style"width: 100%; height: calc(100vh - 80px)":latitude"latitude" :scale&qu…

Vue项目中使用ECharts构建交互式中国地图的详细指南

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

ASP.NET-Server.UrlEncode

目录 背景: Server.UrlEncode作用: 1.URL 编码&#xff1a; 2.避免冲突&#xff1a; 3.安全性&#xff1a; 4.规范化&#xff1a; 实例说明: 不使用Server.UrlEncode 使用Server.UrlEncode 总结: 背景: Server.UrlEncode方法在ASP.NET中主要功能是对URL中的参数进行编…

使用 Boot Camp 助理查明您的 Mac 需不需要 Windows 安装介质

使用 Boot Camp 助理查明您的 Mac 需不需要 Windows 安装介质 当前的 Mac 机型无需介质即可安装 Windows&#xff0c;也就是说&#xff0c;您不需要用到外置驱动器。较早的 Mac 机型需要用到 USB 驱动器或光盘驱动器。使用 Boot Camp 助理可查明您需要用到什么。 Boot Camp 助…

CXL-Enabled Enhanced Memory Functions——论文阅读

IEEE Micro 2023 Paper CXL论文阅读笔记整理 问题 计算快速链路&#xff08;CXL&#xff09;协议是系统社区的一个重要里程碑。CXL提供了标准化的缓存一致性内存协议&#xff0c;可用于将设备和内存连接到系统&#xff0c;同时保持与主机处理器的内存一致性。CXL使加速器&…

遗传算法及基于该算法的典型问题的求解实践

说明 遗传算法是一个很有用的工具&#xff0c;它可以帮我们解决生活和科研中的诸多问题。最近在看波束形成相关内容时了解到可以用这个算法来优化阵元激励以压低旁瓣&#xff0c;于是特地了解和学习了一下这个算法&#xff0c;觉得蛮有意思的&#xff0c;于是把这两天关于该算法…

SpringMVC 02

这里先附上前一篇的地址,以上系列均为博主的学习路线,仅供参考 初识Spring MVC-CSDN博客 下面我们从SpringMVC传递数组开始讲起 1.传递数组 传递数组的方式和传递普通变量的方式其实是相同的,下面我们附上传递的图片 RequestMapping("/r7")public String r1(String[…

笔记本电脑数据恢复:如何轻松地从笔记本电脑恢复文件

不小心从笔记本电脑中删除了一些重要文件&#xff1f;或者恶意软件和其他不可控因素是否导致您的文件消失&#xff1f;人们很容易认为这些文件已经永远消失&#xff0c;并且无法恢复。但这与事实相差甚远。通过遵循正确的数据恢复礼仪并使用良好的数据恢复工具&#xff0c;您可…

(done) 什么是词嵌入技术?word embedding ?(这里没有介绍词嵌入算法)(没有提到嵌入矩阵如何得到)

参考视频&#xff1a;https://www.bilibili.com/video/BV1sw411S7i1/?spm_id_from333.788&vd_source7a1a0bc74158c6993c7355c5490fc600 词嵌入&#xff08;word embedding&#xff09;&#xff1a;把词汇表中的词或短语 -------- 映射 ----> 固定长度向量 我们可以把 …

FPGA静态时序分析与约束(二)、时序分析

系列文章目录 FPGA静态时序分析与约束&#xff08;一&#xff09;、理解亚稳态 FPGA静态时序分析与约束&#xff08;三&#xff09;、读懂vivado时序报告 文章目录 系列文章目录前言一、时序分析基本概念1.1 时钟抖动1.2 时钟偏斜1.3 时钟不确定性Uncertainty1.4 建立时间和保…