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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Hack The Box-Devvortex

目录 信息收集 nmap whatweb WEB web信息收集 wfuzz 漏洞探索 漏洞发现 反弹shell 提权 get user hashcat get root 信息收集 nmap 端口信息收集┌──(root?ru)-[~/kali/hackthebox] └─# nmap -p- 10.10.11.242 --min-rate 10000 Starting Nmap 7…

基于华为ensp的企业网络规划(新版)

第一章 项目概述 1.1 项目总体描述 假设某大型公司总部在北京、在重庆设置分部&#xff0c;总部和分部均有研发部、市场部、财务部等部门&#xff0c;现在要求进行网络规划与设计&#xff0c;实现分部和总部能够进行网络连通。为了保证数据安全&#xff0c;在总部和分部之间可…

全国各省市县统计年鉴/中国环境统计年鉴/中国工业企业数据库/中国专利数据库/污染排放数据库

统计年鉴是指以统计图表和分析说明为主&#xff0c;通过高度密集的统计数据来全面、系统、连续地记录年度经济、社会等各方面发展情况的大型工具书来获取统计数据资料。 统计年鉴是进行各项经济、社会研究的必要前提。而借助于统计年鉴&#xff0c;则是研究者常用的途径。目前国…

第二证券策略:股指预计维持震荡格局 关注消费、农牧饲渔等板块

第二证券指出&#xff0c;在前期高股息盈利板块和科技立异主题接连获得较好体现后&#xff0c;商场出现必定程度的“高切低”现象&#xff0c;首要体现是切换为轻视值和价值方向&#xff0c;中长期高股息盈利和科技立异主题仍是商场主线&#xff0c;3月份后半程关注医药生物、电…

Visual Studio 2013 - 高亮设置突出显示的引用

Visual Studio 2013 - 高亮设置突出显示的引用 1. 高亮设置 突出显示的引用References 1. 高亮设置 突出显示的引用 工具 -> 选项… -> 环境 -> 字体和颜色 References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/

红外相机和RGB相机标定:实现两种模态数据融合

1. 前期准备 RGB相机&#xff1a;森云智能SG2-IMX390&#xff0c;1个红外相机&#xff1a;艾睿光电IR-Pilot 640X-32G&#xff0c;1个红外标定板&#xff1a;https://item.taobao.com/item.htm?_ujp3fdd12b99&id644506141871&spma1z09.2.0.0.5f822e8dKrxxYI 2.操作步…

NSS [SWPUCTF 2022 新生赛]ez_ez_unserialize

NSS [SWPUCTF 2022 新生赛]ez_ez_unserialize 开题&#xff0c;直接给了题目源码。 简单看了一下&#xff0c;题目告诉我们flag在哪&#xff0c;而且类中有高亮文件方法。怎么拿flag已经很明显了。关键点在于__weakup()魔术方法固定死了我们高亮的文件。所以这题只需要绕过__w…

基于51单片机的PWM波发生器两路互补调频脉宽

地址&#xff1a;https://pan.baidu.com/s/1VMr7X_aCmaMd8DeR7Q6OBw 提取码&#xff1a;1234 仿真图&#xff1a; 功能简介&#xff1a; 1、要求占空比和频率可调 2、占空比调节范围&#xff1a;0.1-0.9&#xff0c;频率调节范围0.5kHZ—3.0kHZ 3、使用4个按键调节&#xff0…

基于springboot+vue的智慧生活商城系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

基于Java中的SSM框架实现一汽租车共享平台系统项目【项目源码+论文说明】计算机毕业设计

基于Java中的SSM框架实现一汽租车共享平台系统演示 摘要 随着人们生活水平的不断提高&#xff0c;人们租车进行旅游的行为已成为大家的不二选择。汽车租赁服务被称为交通运输服务行新兴的服务行业&#xff0c;因为汽车租赁无须办理保险、无须年检维修、车型可随意更换等优点&a…

php基于人工智能预警突发疾病系统python-flask-django-nodejs

根据现实需要&#xff0c;此系统我们设计出一下功能&#xff0c;主要有以下功能模板。 前台功能&#xff1a;首页、医生、疾病知识、后台管理。 医生功能&#xff1a;首页、个人中心、咨询信息管理、疾病预警管理、高血压管理、糖尿病管理。 用户功能&#xff1a;首页、个人中心…

Python文字识别自动化处理库之pytesseract使用详解

概要 在当今数字化时代,文字识别技术扮演着越来越重要的角色。Python pytesseract 库是一个强大的工具,能够帮助开发者轻松实现图像中文字的识别。本文将深入探讨 pytesseract 库的原理、功能、使用方法以及实际应用场景,并提供丰富的示例代码,让读者更全面地了解这个工具…

重磅:Python 迎来多线程重大更新 no-GIL

“在 Python 中&#xff0c;GIL 将不复存在。对 AI 生态系统来说是巨大的胜利。”PyTorch 核心维护者 Dmytro Dzhulgakov 感慨地说道。 GIL 是什么&#xff1f;GIL 的全称是 Global Interpreter Lock&#xff08;全局解释器锁&#xff09;&#xff0c;这不仅是 Python 的特性…

[Qt学习笔记]Qt下使用Halcon实现采图时自动对焦的功能(Brenner梯度法)

目录 1、介绍2、实现方法2.1 算法实现过程2.2 模拟采集流程 3、总结4、代码展示 1、介绍 在机器视觉的开发中&#xff0c;现在有很多通过电机去做相机的聚焦调节&#xff0c;对比手工调节&#xff0c;自动调节效果更好&#xff0c;而且其也能满足设备自动的需求&#xff0c;尤…

从零开始学习typescript系列6: typescript各种类型以及类型特殊使用

基础类型的分类 常用 boolean: 布尔值number: 支持2/8/10/16进制string: 字符串enum: 枚举类型&#xff0c;可根据value找到keyarray: 普通数组&#xff0c;有2种方式&#xff0c;string[]或者 Array<string>tuple: 特殊数组&#xff0c;指定数组里的每个元素的类型&am…

内存条@电脑支持的最大内存@升级内存硬件

文章目录 电脑支持的最大内存规格cpu官网查看支持的规格命令行查看脚本化 DDR内存LPDDR内存内存升级扩展&#x1f47a;插槽检查板载内存SPD内存厂商其他 内存参数&#x1f47a;性能指标使用软件查看更多内存相关的软件工具 电脑支持的最大内存规格 确认电脑最大支持内存大小和频…

Android14之selinux报错:ERROR: end of file in comment(一百九十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

HR人才测评,招聘游戏测评师的入职测评方案

一、 游戏测评师的基本工作标准 1、 编写测试用例&#xff0c;及时提交并复测回执BUG&#xff0c;针对功能不完善的地方给出合理建议。 2、 可以按时保质保量完成组长布置的测试任务&#xff0c;并尽可能多的并行多个测试项。 3、 可以独立完成与项目组沟通&#xff0c;并…

公众号获取token失败,当日access_token超过1万次处理

问题&#xff1a;如果你当日的 access_token 获取次数已经超过了 1 万次&#xff0c;那么很有可能是由于频繁获取 access_token 而被微信限制了。在这种情况下&#xff0c;你需要等待到下一个自然日或者等待一段时间后再尝试获取 access_token。或者直接去公众号去刷新掉用量。…

数据分析-Pandas序列滑动窗口配置参数

数据分析-Pandas序列滑动窗口配置参数 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff1f; 数据表&…