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

news2024/12/23 16:59:42

实现效果

在这里插入图片描述

完整代码

<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.coloradmin.cn/o/1532482.html

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

相关文章

网状的隧道穿梭特效HTML代码

网状的隧道穿梭特效HTML代码&#xff0c;效果是动态的&#xff0c;可以下载源码&#xff0c;自己在本地运行 源码下载 网状的隧道穿梭特效HTML代码

uni-app 中两个系统各自显示不同的tabBar

最近在一个uni-app项目中遇到一个需求,在登录页面成功登录以后需要判断身份,不同的身份的进入不同的tabBar页面,但是在uni-app项目中pages.json中的tabBar的list数组只有一个&#xff0c;且不能写成动态的,那如何实现这个需求呢?答案是需要我们自定义tabBar。 目录 1、我们确…

关于paper中的一些硬件知识

一. OS中的event Information in event traces from software systems can help developers with performance analysis, debugging and troubleshooting 1.事件的概念 已知软件系统中的event能够帮助开发者对系统进行性能分析、调试以及定位&#xff0c;那我们应该仔细考虑…

简单了解:localhost 与 127.0.0.1 的区别

在信息技术的世界里&#xff0c;localhost和127.0.0.1频繁出现在各种网络及软件开发的场景之中。它们似乎指向同一个意义——那就是你的本地机器。但仔细探究之下&#xff0c;你会发现它们之间其实存在着一些微妙的差异。今天&#xff0c;我们就来深究这两者之间的区别&#xf…

Maxwell监听mysql的binlog日志变化写入kafka消费者

一. 环境&#xff1a; maxwell:v1.29.2 (从1.30开始maxwell停止了对java8的使用&#xff0c;改为为11) maxwell1.29.2这个版本对mysql8.0以后的缺少utf8mb3字符的解码问题&#xff0c;需要对原码中加上一个部分内容 &#xff1a;具体也给大家做了总结 &#xff1a; 关于v1.…

GaussDB(分布式)实例故障处理

一、说明 GaussDB Kernel实例出现故障时&#xff0c;可以按照本节的办法进行实例快速修复。 1、执行gs_om -t status --detail查看集群状态&#xff0c;cluster_state为Normal&#xff0c;balanced为No&#xff0c;请重置实例状态。 2、执行gs_om -t status --detail查看集群…

MySQl基础入门⑩

上一章内容 数据插入、更新与删除 以下是创建一个名为users的表并定义其字段结构的SQL命令&#xff08;以MySQL为例&#xff09;&#xff1a; CREATE TABLE users (id INT AUTO_INCREMENT, username VARCHAR(255) NOT NULL,email VARCHAR(255) NOT NULL UNIQUE,password VAR…

new mars3d.layer.GeoJsonLayer({的pupup配置参考

new mars3d.layer.GeoJsonLayer({的pupup配置可选项以及相关效果参考&#xff1a; 说明&#xff1a;popup按属性字段配置&#xff0c;可以是字符串模板或数组 1.popup仅配置{type}{name}等属性的的时候&#xff0c;指显示json文件内数据的type与name&#xff0c;效果如下 相关…

关系型数据库mysql(2)SQL语句

目录 一.SQL语句简介 1.1SQL语言 1.2SQL语句分类 1.3SQL分类 1.4SQL 语言规范 二.数据库基本操作 2.1查看数据库中的库信息 2.2查看数据库中的表信息 数据库内查看 数据库外查看 2.3显示数据库的结构&#xff08;字段&#xff09; ​编辑 2.4 字段属性 2.5常见的数…

记录一下目前为止的算法成长

每日笔记 复习曲线 间隔1天、3天、7天、15天、30天&#xff0c;然后以一个月为周期复习 2023. 12. 24 一定要每天早中晚都要复习一下 早中午每段一两道, 而且一定要是同一个类型, 不然刷起来都没有意义 11.29 开始向着面试刷题跟进! 每天刷4题左右 ,一周之内一定要是统一类…

这里是一本关于 DevOps 企业级 CI/CD 实战的书籍...

文章目录 &#x1f4cb; 前言&#x1f3af; 什么是 DevOps&#x1f3af; 什么是 CI/CD&#x1f3af;什么是 Jenkins&#x1f9e9; Jenkins 简单案例 &#x1f3af; DevOps 企业级实战书籍推荐&#x1f525; 参与方式 &#x1f4cb; 前言 企业级 CI/CD 实战是一个涉及到软件开发…

AIOCR:AI文字识别web集成系统@Kylin+RISCV

基于kotti_ai的AI文字识别web集成系统 AIOCR项目目标&#xff1a; 在KylinRISCV搭建一个kotti_ai构架的网站&#xff0c;提供AI OCR文字识别web服务。 二期目标&#xff1a;在AIOCR的基础上提供chatgpt和文心一言等大模型调用&#xff0c;建立综合大模型应用平台。 功能&am…

STL_list文档使用介绍与底层代码实现简介

文章目录 list介绍list的使用构造函数&#xff08;constructor&#xff09;迭代器list capacitylist modify&#xff08;修改&#xff09;其他接口函数list迭代器失效问题 list实现基础框架(节点类&#xff09;基础框架&#xff08;迭代器类&#xff09;基础框架&#xff08;链…

爬虫系列-CSS基础语法

&#x1f308;个人主页&#xff1a;会编程的果子君 &#x1f4ab;个人格言:“成为自己未来的主人~” CSS全称层叠样式表 &#xff0c;主要用来定义页面内容展示效果的一门语言&#xff0c;HTML&#xff1a;页面骨架&#xff0c;素颜CSS&#xff1a;页面效果美化&#xff1a…

【概念】神马是分布式?

SueWakeup​​​​​ 个人主页&#xff1a;SueWakeup 系列专栏&#xff1a;学习Java框架 个性签名&#xff1a;保留赤子之心也许是种幸运吧 本文封面由 凯楠&#x1f4f7; 友情赞助播出&#xff01; 目录 前言 1. 系统架构的演变 2. SOA 与微服务的关系 3. 分布式核心知识…

PCL QT visualizer

PCL QT visualizer 用Qt创建PCL 可视化应用程序。 项目组织 UI界面 Compile & Run cmake -B build -S . -DCMAKE_TOOLCHAIN_FILED:\vcpkg\scripts\buildsystems\vcpkg.cmakecmake --build build --config Releasewindeployqt6.exe .\pcl_visualizer.exe.\build\Release\…

“因聚而生,数智有为”实在智能Agent牵手华为生态合作

近日&#xff0c;2024华为中国合作伙伴大会顺利闭幕&#xff0c;实在智能受邀出席&#xff0c;携TARS大模型及实在Agent&#xff08;智能体&#xff09;数字员工精彩亮相&#xff0c;与华为生态伙伴共同探讨如何帮助客户抓住数智化转型的巨大机遇&#xff0c;加速培育“新质生产…

Python数学建模-2.9Matplotlib库

Matplotlib库是Python中一个非常流行的绘图库&#xff0c;它提供了大量的绘图工具&#xff0c;可以生成各种类型的静态、动态、交互式的图表。Matplotlib的设计初衷是为了与NumPy配合使用&#xff0c;从而提供一个强大的数学绘图工具。 1.Matplotlib的主要特点 丰富的图表类型…

vue2 中使用音频

vue2 中使用音频 在 template 页面 写入 audio 标签 <template><div><audio ref"moreAudio" :src"moreAudioSrc"></audio><audio ref"noAudio" :src"noAudioSrc"></audio></div> </t…

MySQL 索引的分类和优化

​ 优质博文&#xff1a;IT-BLOG-CN 索引是什么 &#xff1a; MySQL 官方对索引的定义&#xff1a;索引&#xff08;Index&#xff09;是帮助 MySQL 高效获取数据的数据结构。可以得到索引的本质&#xff1a;索引是数据结构。索引的目的在于提高查询效率。可以简单理解为&#…