Vue+Element-UI Table表格实现复选框单选效果(隐藏表头上的全选Checkbox)

实现效果

在这里插入图片描述

完整代码

<div class="box-pos"><el-table ref="table" :header-cell-style="{ color: '#FFF', background: '#333' }":cell-style="{ color: '#FFF', background: '#333' }" :data="grListData" style="width: 100%"@selection-change="selectionChange"><template slot="empty"><span style="color: #969799">{{ $t("NeoLight.empty") }}</span></template><el-table-column type="selection" width="50" /><el-table-column prop="plantCode" label="厂区" /><el-table-column prop="grCode" label="单据号" /><el-table-column prop="grItem" label="单据行" /><el-table-column prop="grDate" label="单据日期" /><el-table-column prop="materialCode" label="料号" />//........</el-table>
</div>

js代码

  data() {return {multipleSelection: [],};},methods: {selectionChange(data) {this.multipleSelection = []if (data.length > 1) {this.$refs.table.clearSelection()this.$refs.table.toggleRowSelection(data[data.length - 1])}this.multipleSelection = data[data.length - 1] ? [data[data.length - 1]] : []},}

隐藏表头上的全选Checkbox

.box-pos {/**找到表头那一行,然后把里面的复选框隐藏掉**/::v-deep .el-table__header-wrapper .el-checkbox {display: none !important;}}

参考链接:https://blog.csdn.net/a772116804/article/details/131899825

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

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

相关文章

前端知识点03(JS)

文章目录 前端知识点03&#xff08;JS&#xff09;1、JS中this指向问题2、script中的async和defer的区别3、setTimeOut和setInterval4、Es6和ES5的区别5、ES6的新特性 &#x1f389;写在最后 前端知识点03&#xff08;JS&#xff09; hello hello~ &#xff0c;这里是 code袁~&…

python日常刷题(一)

前言&#xff1a;本文记录2024年3月11日至2024年3月19日牛客网所做的基础题目&#xff08;错题本&#xff09;&#xff1a; &#x1f3ac;个人简介&#xff1a;努力学习ing &#x1f4cb;本专栏&#xff1a;python日常刷题 &#x1f380;CSDN主页&#xff1a;愚润求学 文章目录…

软件的安装与卸载(YUM)

YUM&#xff1a;yum 是一个方便的"应用商店"&#xff0c;你可以通过它轻松地安装、更新和删除软件包&#xff0c;就像从应用商店中下载和安装应用程序一样。&#xff08;这个得用root身份&#xff0c;普通用户权限不够&#xff09; 常用命令&#xff1a; 1.安装软件…

7.安全性基础知识

主要议题&#xff1a; 安全防护体系&#xff1a;7层次&#xff0c;要记7层次的名称以及这些层次与哪些方面相关&#xff1b; 安全保护等级&#xff1a;5等级&#xff0c;要记5等级安全性的高低排序&#xff0c;掌握每个等级的特点&#xff1b; 用户认证机制&#xff1a;用户认…

python网络爬虫实战教学——urllib的使用(2)

文章目录 专栏导读1、前言2、URLError3、HTTPError4、urlparse5、urlunparse 专栏导读 ✍ 作者简介&#xff1a;i阿极&#xff0c;CSDN 数据分析领域优质创作者&#xff0c;专注于分享python数据分析领域知识。 ✍ 本文录入于《python网络爬虫实战教学》&#xff0c;本专栏针对…

第1章 数据管理

思维导图 1.1 引言 从数据中获取的价值不可能凭空产生或依赖于偶然&#xff0c;需要有目标、规划、协作、和保障&#xff0c;也需要管理和领导力。定义&#xff1a; 数据管理是为了交付、控制、保护并提升数据和信息资产的价值&#xff0c;在其整个生命周期中制定计划、制度、…

【Web】浅聊Hessian反序列化原生jdk利用与高版本限制绕过

目录 前言 原理分析 EXP Hessian2 低版本 直接Runtime命令执行 Hessian2 高版本 利用Unsafe加载恶意字节码二次调用触发初始化 利用TemplatesImpl实例化恶意类 jdk高版本打JNDI 前文&#xff1a;【Web】浅聊Hessian异常toString姿势学习&复现 前言 上篇文章介绍…

mysql笔记:23. 在Mac上安装与卸载MySQL

文章目录 下载MySQL安装包1. 打开MySQL官网&#xff0c;点击DOWNLOADS2. 点击GPL Downloads3. 点击MySQL Community Server打开下载页面4. 选择需要的文件进行下载5. ARM or x86 DMGbrewTAR卸载1. 在系统中卸载2. 在终端中卸载 MySQL对Mac电脑的适配十分强大&#xff0c;再加上…

Oracle with as用法

一、简介 with…as关键字&#xff0c;是以‘with’关键字开头的sql语句&#xff0c;在实际工作中&#xff0c;我们经常会遇到同一个查询sql会同时查询多个相同的结果集&#xff0c;即sql一模一样&#xff0c;这时候我们可以将这些相同的sql抽取出来&#xff0c;使用with…as定…

手拉手整合Springboot3+RocketMQ2.3

RocketMQ 基本概念 消息模型Message Model RocketMQ 主要由 Producer、Broker、Consumer 三部分组成&#xff0c;其中 Producer 负责生产消息&#xff0c;Consumer 负责消费消息&#xff0c;Broker 负责存储消息。Broker 在实际部署过程中对应一台服务器&#xff0c;每个 Bro…

PHP全新美化广告横幅在线制作源码

源码简介 可以做网站的引流不需要安装上传就可以使用&#xff0c;在第一版基础上做了二次开发更加好用 注意&#xff1a;主机和服务器均可架设搭建,如果使用宝塔架设点击访问的时候提示找不到文件路径的时候,记得点击网站目录把防跨站攻击先关闭,这样就可以正常访问了,这款是…

两台电脑简单的通信过程详解(局域网,同网段)

来源&#xff1a; https://www.bilibili.com/video/BV1BA411373b/ 一、原理 描述过程&#xff1a;分别以PC1、PC2、PC2、PC1的角度 二、eNSP测试 1.连接设备 2.查看PC1情况 3.打开抓包后&#xff0c;再ping一下PC2 4.PC1发送ARP报文 broadcast 意思为广播(IP都是f,意为255…

【数字图像处理matlab系列】保存图像

【数字图像处理系列】保存图像imwrite函数 使用函数imwrite可以将图像保存到本地上&#xff0c;该函数的语法为 imwrite(image_data, filename)其中&#xff0c;image_data是要写入的图像数据&#xff0c;可以是一个矩阵或一个三维数组&#xff08;对于彩色图像&#xff09;&…

Java代码基础算法练习-求给定3个数, 进行从小到大排序-2024.03.20

任务描述&#xff1a; 输入三个整数 x,y,z(0<x<1000&#xff0c;0<y<1000&#xff0c;0<z<1000)&#xff0c;请把这三个数由小到大输出。 任务要求&#xff1a; 代码示例&#xff1a; package march0317_0331;import java.util.Scanner;public class m24…

系统设计实例(一)百万级别用户系统

二、百万级别用户系统 原则&#xff1a; 尽可能地缓存数据采用无状态Web层支持多个数据中心在 CDN 中托管静态资源通过分片扩展数据层将层级拆分为独立的服务 负载均衡器 负载均衡器会将传入的流量均匀分配给在负载均衡集合中定义的Web服务器&#xff0c;用户直接连接负载均…

【软件测试】如何设计自动化测试脚本

企业中如何设计自动化测试脚本呢&#xff1f;今天我们就来为大家分享一些干货。 一、线性设计 线性脚本设计方式是以脚本的方式体现测试用例&#xff0c;是一种非结构化的编码方式&#xff0c;多数采用录制回放的方式&#xff0c;测试工程师通过录制回访的访问对被测系统进行…

[LCP 51. 烹饪料理] 子集型回溯

Problem: LCP 51. 烹饪料理 文章目录 思路案例分析Code 思路 子集型回溯有两种解法 输入视角 通过判断集合中的每一个元素 k&#xff0c;认为元素 k 被选入子集或不被选入子集&#xff0c;从而得到答案。其 dfs 形状是一个高度为 n 的二叉树。作为当前节点的元素 k 代表的是这…

Unity Toggle与Toggle Group的妙用

Toggle与Toggle Group结合使用&#xff0c;妙处多多。 因为在同一Toggle Group内只有一个Toggle可以被选中&#xff0c;那么对于我们要创建单选按钮组、游戏的一些开关、暗夜模式、筛选不同显示内容等功能都非常好用。 比如我要实现通过点击不同按钮,从而筛选显示不同内容&am…

ES8生产实践——ES跨集群数据迁移方案测评

引言 场景需求 经常有小伙伴咨询如何将整个es集群数据如何迁移到另一个集群&#xff0c;其中往往会涉及到以下的问题&#xff1a; 跨es版本&#xff1a;老版本es集群数据迁移到新版本es集群。 跨集群&#xff1a;源数据和目的数据分布在两个不同的集群。 跨网络&#xff1a;两…

ch6文件操作和异常处理

os.listdir(path) 函数详解 功能: os.listdir(path) 函数用于返回指定目录下的所有文件和文件夹的名字列表&#xff0c;但不包括 . 和 ..。 参数: path: 要列出的目录的路径。 返回值: 一个包含目录下所有文件和文件夹名字的列表。 示例: import ospath "/home/u…