el-table相关的功能实现

1. 表格嵌套表格时,隐藏父表格的全选框

        场景:当table表格设置复选(多选)功能时,如何隐藏表头的复选框,不让用户一键多选。


<el-table :header-cell-class-name="cellClass">// 表头复选框禁止点击
function cellClass(row) {if (row.columnIndex === 0) {return 'disabledCheck'}
}// 隐藏表头的复选框样式
:deep(.el-table .disabledCheck .cell .el-checkbox__inner) {display: none;
}

2. 判断多选时的点击操作,是选中还是取消

<el-table @select="onSelect">// 判断时选中还是取消
function onSelect(rows, row) {let selected = rows.length && rows.indexOf(row) !== -1console.log('selected', selected) // true就是选中,0或者false是取消选中
}

3. 表格有展开项时,动态控制表格的展开图标显示或隐藏

        首先,可以通过为el-table-column设置type="expand"属性来为表格增加展开项。

<el-table :data="props.tableData"><el-table-column type="expand"><!-- 展开的子任务 --><template #default="props"><el-table :data="props.row.childJobLists"> </el-table></template></el-table-column></el-table>

        若希望动态控制第一列是否显示展开>图标,可以通过动态设置table的样式来实现。

        此处用到row-class-name属性,动态为表格传入类名

<el-table :row-class-name="getRowClassName">function getRowClassName({ row, rowIndex }) {// 根据row的childJobLists属性是否为空数组,判断该行内容是否展开if (row.childJobLists.length == 0) {return 'row-expand-cover'}
}:deep(.row-expand-cover .el-table__expand-icon) {visibility: hidden
}

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

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

相关文章

基于Springboot无人驾驶车辆路径规划系统(源码+定制+开发)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

雷赛L6N伺服驱动器基本参数设置——EtherCAT 总线型

1、指令脉冲设置 PA0.08代表电机转一圈&#xff0c;所需要的指令脉冲数&#xff0c;该值驱动器默认值为0&#xff0c;该值更改后断电重启后生效。 2、编码器反馈脉冲设置 PA0.11&#xff0c;代表编码器输出每转脉冲数&#xff0c;实际反馈的脉冲数做了4倍频处理&#xff0c;设…

CSS揭秘:7. 伪随机背景

前置知识&#xff1a;CSS 渐变&#xff0c;5. 条纹背景&#xff0c;6. 复杂的背景图案 前言 本篇主要内容依然是关于背景的&#xff0c;无限平铺的背景会显得整齐美观&#xff0c;但又有些呆板&#xff0c;如何实现背景的多样性和随机性&#xff0c;是本篇的核心。 一、四种颜…

LTSC版本的Windows系统没有默认图片查看工具和便笺?教你下载。

前言 最近小白在使用Windows 11 LTSC版本&#xff0c;感觉真的是嘎嘎好用。 终于等到了&#xff01;旧电脑福星——最干净的Win11官方原版系统 小白用来安装这个系统的电脑配置其实也不低&#xff1a; i5-12400&#xff08;核显输出&#xff09; 16GB DDR4 3200MHz 500GB …

植物健康,Spring Boot来助力

3系统分析 3.1可行性分析 通过对本植物健康系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本植物健康系统采用SSM框架&#xff0c;JAVA作为开发语言&#…

【c++篇】:从基础到实践--c++内存管理技巧与模版编程基础

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨个人主页&#xff1a;余辉zmh–CSDN博客 ✨ 文章所属专栏&#xff1a;c篇–CSDN博客 文章目录 前言一.c/c内存分布二.c/c的动态内存管理方式2.1.c语言的动态内存管…

Rust初踩坑

一、下载 到官网https://www.rust-lang.org/zh-CN/tools/install下载你需要的版本 二、安装 执行rustup-init 文件&#xff0c;选择1 按提示直到安装完成 可以通过以下命令测试&#xff1a; rustc -V # 注意的大写的 V cargo -V # 注意的大写的 V三、在VScode中…

Linux--epoll(ET)实现Reactor模式

Linux–多路转接之epoll Reactor反应堆模式 Reactor反应堆模式是一种事件驱动的设计模式&#xff0c;通常用于处理高并发的I/O操作&#xff0c;尤其是在服务器或网络编程中。 基本概念 Reactor模式又称之为响应器模式&#xff0c;基于事件多路复用机制&#xff0c;使得单个…

UDP(用户数据报协议)端口监控

随着网络的扩展&#xff0c;确保高效的设备通信对于优化网络功能变得越来越重要。在这个过程中&#xff0c;端口发挥着重要作用&#xff0c;它是实现外部设备集成的物理连接器。通过实现数据的无缝传输和交互&#xff0c;端口为网络基础设施的顺畅运行提供了保障。端口使数据通…

vuex使用modules模块化

1、main.js引入 //引入vuex import store from ./store new Vue({el: #app,router,store,components: { App },template: <App/>,data:function(){return{wbWinList: [] // 定义的变量&#xff0c;全局参数}}, })2、index.js import Vue from vue; import Vuex from …

python实战(一)——iris鸢尾花数据集分类

一、任务背景 本文是python实战系列专栏的第一篇文章&#xff0c;我们将从分类开始由浅入深逐步学习如何使用python完成常规的机器学习/深度学习任务。iris数据集是经典的机器学习入门数据集&#xff0c;许多分类任务教程都会以这个数据集作为示例&#xff0c;它的数据量是150条…

路由器 相关知识

一、路由器是什么 参考&#xff1a;图解系列--路由器和它庞大的功能_路由功能-CSDN博客 路由器是指&#xff1a;主要负责 OSI参考模型中网络层的处理工作&#xff0c;并根据路由表信息在不同的网络 之间转发IP 分组的网络硬件(图3-1)。这里的网络一般是指IP 子网&#xff0c;…

Redis 发布订阅 总结

前言 相关系列 《Redis & 目录》&#xff08;持续更新&#xff09;《Redis & 发布订阅 & 源码》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;《Redis & 发布订阅 & 总结》&#xff08;学习总结/最新最准/持续更新&#xff09;《Redis &a…

回顾项目测试全过程,测试如何回答“测完了吗?”

“测完了吗&#xff1f;” 是系统测试岗位同学经常被问到的问题&#xff0c;提问的人可能是合作的研发&#xff0c; 合作的产品经理&#xff0c;甚至是项目的业务方&#xff0c;也有可能是测试自己。 这个问题至少有两层意思&#xff0c;不仅问新功能测试进度是否完成&#xf…

qt QMediaPlaylist

QMediaPlaylist 是 Qt Multimedia 模块中的一个类&#xff0c;用于管理媒体文件的播放列表。它提供了一种方便的方式来组织和控制多媒体内容的播放&#xff0c;如音频和视频文件。 主要方法 QMediaPlaylist(00bject *parent nullptr):构造一个新的媒体播放列表对象。void add…

论文解析八: GAN:Generative Adversarial Nets(生成对抗网络)

目录 1.GAN&#xff1a;Generative Adversarial Nets&#xff08;生成对抗网络&#xff09;1、标题 作者2、摘要 Abstract3、导言 IntroductionGAN的介绍 4、相关工作 Related work5、模型 Adversarial nets总结 6.理论计算 Theoretical Results具体算法公式全局优化 Global O…

【Java网络编程】从套接字(Socket)概念到UDP与TCP套接字编程

目录 网络编程 1.socket套接字 2.udp数据报套接字编程 DatagramSocket API DatagramPacket API Java基于UDP实现客户端-服务器代码实例 3.tcp流套接字编程 ServerSocket API Socket API TCP中的长短连接 Java基于TCP客户端-服务器代码实例 网络编程 1.socket套接字 S…

正则表达式基本语法(快速认知)

正则表达式:一种用于匹配字符串的模式。它可以用于搜索、替换、验证字符串等多种操作。 基本语法: 字符类: [abc]: 匹配 a、b 或 c。[a-z]: 匹配小写字母。[A-Z]: 匹配大写字母。[0-9]: 匹配数字母 比如我们的电话号码是11个数字组成, 则可以表示为: String tel"[0-9][0…

uniapp 引入了uview-ui后,打包错误,主包过大解决方案

原因&#xff1a;由于使用uniapp来设计小程序&#xff0c;使用uview的组件库&#xff0c;导致了主包过大&#xff0c;无法打包 前提条件&#xff1a;已经完成了分包&#xff0c;如果还没有分包的先分包&#xff0c;需要上传代码时用到 1. 通常情况&#xff0c;大多数都是通过点…

构建中小企业设备管理平台:Spring Boot应用

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…