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.rhkb.cn/news/280531.html

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

相关文章

01分布式搜索引擎ES

分布式搜索引擎ES 1.初识elasticsearch1.1.了解ES1.2.倒排索引1.3.es的一些概念 2.索引库操作2.1.mapping映射属性2.2.索引库的CRUD 3.文档操作3.1.新增文档3.2.查询文档3.3.删除文档3.4.修改文档3.5.总结 4.RestAPI4.0.导入Demo工程4.1.创建索引库4.2.删除索引库4.3.判断索引库…

Linux环境开发工具之vim

前言 上一期我们已经介绍了软件包管理器yum&#xff0c; 已经可以在linux上查找、安装、卸载软件了&#xff0c;本期我们来介绍一下文本编辑器vim。 本期内容介绍 什么是vim vim的常见的模式以及切换 vim命令模式常见的操作 vim底行模式常见的操作 解决普通用户无法执行sudo问…

Apache Superset

前言 最近在准备一个小的项目&#xff0c;需要对 Hive 的数据进行展示&#xff0c;所以想到了把 Hive 的数据导出到 MySQL 然后用 Superset 进行展示。 Superset 1.1 Superset概述 Apache Superset是一个现代的数据探索和可视化平台。它功能强大且十分易用&#xff0c;可对接…

ASP .Net Core 配置集合 IConfiguration 的使用

&#x1f433;简介 IConfiguration 是 ASP.NET Core 中的一个接口&#xff0c;用于表示配置集合。以下是关于 IConfiguration 的详细介绍&#xff1a; 作用&#xff1a;IConfiguration 允许开发人员从各种来源&#xff08;如文件、环境变量、命令行参数等&#xff09;读取应用…

wireshark 使用实践

1、打开wireshark软件&#xff0c;选择网卡&#xff0c;开始抓包 2、打开浏览器&#xff0c;访问一个http网站&#xff1a;这里我用 【邵武市博物馆】明弘治十一年&#xff08;1498&#xff09;铜钟_文物资源_福建省文 测试&#xff0c;因为它是http的不是https&#xff0c;方…

Oracle19C静默安装教程

文章目录 一、安装前的准备1、安装Linux操作系统2、配置网络源或者本地源3、hosts文件配置 二、准备安装环境1、安装依赖包2、创建oracle用户组3、配置系统内核参数4、关闭selinux5、配置oracle用户环境6、修改用户的Shell限制 三、静默安装Oracle数据库1、创建oracle安装目录2…

申请双软认证需要哪些材料?软件功能测试报告怎么获取?

“双软认证”是指软件产品评估和软件企业评估&#xff0c;其中需要软件测试报告。 企业申请双软认证除了获得软件企业和软件产品的认证资质&#xff0c;同时也是对企业知识产权的一种保护方式&#xff0c;更可以让企业享受国家提供给软件行业的税收优惠政策。 那么&#xff0c;…

[BT]BUUCTF刷题第2天(3.20)

第2天&#xff08;共5题&#xff09; Web [ACTF2020 新生赛]Exec Payload&#xff1a;target127.0.0.1;cat /flag 分号;在许多shell中用作命令分隔符&#xff0c;意味着在执行完前一个命令&#xff08;这里是设置target变量&#xff09;后&#xff0c;接着执行cat /flag命令…

C++项目 -- 负载均衡OJ(一)compile_server

C项目 – 负载均衡OJ&#xff08;二&#xff09;compile_server 文章目录 C项目 -- 负载均衡OJ&#xff08;二&#xff09;compile_server一、compile_server设计1.总体服务流程 二、compiler.hpp三、runner.hpp四、compile_run.hpp五、compile_server.cc5.1.编译功能调试&…

【CNN轻量化】ParameterNet: Parameters Are All You Need 参数就是你所需要的

论文链接&#xff1a;http://arxiv.org/abs/2306.14525 代码链接&#xff1a;https://github.com/huawei-noah/Efficient-AI-Backbones 一、摘要 现有的低FLOPs模型&#xff08;轻量化模型&#xff09;无法从大规模预训练中受益。本文旨在增加大规模视觉预训练模型中的参数数量…

责任链模式(处理逻辑解耦)

前言 使用设计模式的主要目的之一就是解耦&#xff0c;让程序易于维护和更好扩展。 责任链则是将处理逻辑进行解耦&#xff0c;将独立的处理逻辑抽取到不同的处理者中&#xff0c;每个处理者都能够单独修改而不影响其他处理者。 使用时&#xff0c;依次调用链上的处理者处理…

从零到一构建短链接系统(八)

1.git上传远程仓库&#xff08;现在才想起来&#xff09; git init git add . git commit -m "first commit" git remote add origin OLiyscxm/shortlink git push -u origin "master" 2.开发全局异常拦截器之后就可以简化UserController 拦截器可以…

Jackson 2.x 系列【3】解析器 JsonParser

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-seata-demo 文章目录 1. 前言2. 解析原理3. 案例演示3.1 创建 JsonParser3.2 解析3.3 读取3.4 测试 1. 前…

C语言 指针练习

一、 a、b是两个浮点型变量&#xff0c;给a、b赋值&#xff0c;建立两个指针分别指向a的地址和b的地址&#xff0c;输出两个指针的值。 #include<stdio.h> int main() {float a,b,*p1,*p2;a10.2;b2.3;p1&a;p2&b;printf("a%f,b%f\n",a,b);printf("…

U-Net代码复现--更新中

本文记录自己的学习过程&#xff0c;内容包括&#xff1a; 代码解读&#xff1a;Pytorch-UNet 深度学习编程基础&#xff1a;Pytorch-深度学习&#xff08;新手友好&#xff09; UNet论文解读&#xff1a;医学图像分割&#xff1a;U_Net 论文阅读 数据&#xff1a;https://hack…

Java与Go:指针

在计算机内存中&#xff0c;每个变量都有一个唯一的地址&#xff0c;指针就是用来保存这个地址的变量。通过指针&#xff0c;我们可以间接地访问和修改存储在该地址处的数据。今天我们来聊一聊Java和Go指针&#xff0c;预告一下&#xff0c;我们需要借助C语言做一些小小的比较。…

基于cnn深度学习的yolov5+pyqt+分类+resnet+骨龄检测系统

往期热门博客项目回顾&#xff1a; 计算机视觉项目大集合 改进的yolo目标检测-测距测速 路径规划算法 图像去雨去雾目标检测测距项目 交通标志识别项目 yolo系列-重磅yolov9界面-最新的yolo 姿态识别-3d姿态识别 深度学习小白学习路线 YOLOv5与骨龄识别 YOLOv5&a…

容器中的大模型(三)| 利用大语言模型:容器化高效地部署 PDF 解析器实践...

作者&#xff1a;宋文欣&#xff0c;智领云科技联合创始人兼CTO 01 简介 大语言模型&#xff08;LLMs&#xff09;正逐渐成为人工智能领域的一颗璀璨明星&#xff0c;它们的强大之处在于能够理解和生成自然语言&#xff0c;为各种应用提供了无限可能。为了让这些模型更好地服务…

网络编程:数据库

一、作业 1> 创建一个工人信息库&#xff0c;包含工号&#xff08;主键&#xff09;、姓名、年龄、薪资。 2> 添加三条工人信息&#xff08;可以完整信息&#xff0c;也可以非完整信息&#xff09; 3> 修改某一个工人的薪资&#xff08;确定的一个&#xff09; 4> …

[C++]20:unorderedset和unorderedmap结构和封装。

unorderedset和unorderedmap结构和封装 一.哈希表&#xff1a;1.直接定址法&#xff1a;2.闭散列的开放定址法&#xff1a;1.基本结构&#xff1a;2.insert3.find4.erase5.补充&#xff1a;6.pair<k,v> k的数据类型&#xff1a; 3.开散列的拉链法/哈希桶&#xff1a;1.基…