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;尤其到…

HDC2010+STM32读取数据发送到onenet平台

第一次用HDC2010用stm32l051单片机读取数据看了2天的datasheet都没看明白&#xff0c;好在在老板的帮助下里面的数据读取出来。之后的工作一个人好在顺利完成。以下记录一下写的代码 /* USER CODE BEGIN Header */ /********************************************************…

Linux下非阻塞IO实验二

一. 简介 前面一篇文章编写Linux驱动代码&#xff08;轮询函数的实现&#xff09;&#xff0c;来处理 Linux下应用程序以非阻塞方式访问设备。文章地址&#xff1a; Linux下非阻塞IO实验一-CSDN博客 本文编写另外一种驱动代码实现方式&#xff0c;与上面实现的区别主要是阻…

Selenium WebDriver类的常用属性和方法汇总

WebDriver类是 Selenium WebDriver 提供的用于控制浏览器的核心类之一&#xff0c;它提供了许多属性和方法来管理浏览器会话、导航到不同的网页、定位和操作页面元素等。下面分别归纳其属性和方法&#xff1a; **属性&#xff1a;** 1. capabilities: 返回当前会话的浏览器的…

rsync+inotify-tools文件传输

目录 rsync rsync概述 rsync优缺点 rsync参数 rsync命令 rsync同步源 linux 安装rsync 安装rsync服务端 安装rsync客户端 windows 安装rsync rsync实践 inotify-tools inotify-tools概述 innotify-tools 命令、参数、事件 rsync客户端安装inotify-tools innotif…

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

目录 自定义组件的生命周期 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;证明切…

华为配置敏捷分布式SFN漫游实验

配置敏捷分布式SFN漫游示例 组网图形 图1 配置敏捷分布式SFN漫游示例组网图 组网需求数据规划配置思路配置注意事项操作步骤配置文件 组网需求 某医院通过部署敏捷分布式网络给医护人员提供WLAN接入服务&#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)…

k8s admin 用户生成token

k8s 版本 1.28 创建一个admin的命名空间 admin-namespce.yaml kind: Namespace apiVersion: v1 metadata: name: admin labels: name: admin 部署进k8s kubectl apply -f admin-namespce.yaml 查看k8s namespace 的列表 kubectl get namespace查看当前生效的…

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 模块提供了生产级别…

el-table按钮获取当前行元素

el-table按钮获取当前行元素 vue2 <el-table-column label"操作" width"240px"><template slot-scope"scope"><el-button size"mini" click"toItem(scope.row)">用户详情</el-button><el-butto…

【Unity】详细介绍

Unity讲解 Unity是一个广泛使用的游戏开发平台&#xff0c;由Unity Technologies开发。它提供开发者一个强大的集成环境来创建2D和3D游戏及交互式内容。Unity自身包含一个图形引擎、物理引擎、声音处理系统、动作捕捉系统、网络系统等多个模块&#xff0c;使得开发者能够实现丰…

C++高级面试题:什么是 C++ 中的多态指针(Polymorphic Pointers)?

什么是 C 中的多态指针&#xff08;Polymorphic Pointers&#xff09;&#xff1f; 在 C 中&#xff0c;多态指针&#xff08;Polymorphic Pointers&#xff09;通常指向基类&#xff08;Base Class&#xff09;的指针&#xff0c;但它可以指向派生类&#xff08;Derived Clas…

Linux------JAVA项目发布

启动jar TODO: 直接指定jar包外的yml 用户导出配置文件 jar xf wisdom-classroom.jar BOOT-INF/classes/application.yml jar xf wisdom-classroom.jar BOOT-INF/classes/application-druid.yml用于导入配置文件 jar uf wisdom-classroom.jar BOOT-INF/classes/application.y…

微信小程序--分享如何与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; 区块链技术和系统 分布式一致性算法和协议 块链性能 信息储存系统 区块链可扩展性 区块…