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.mzph.cn/web/56813.shtml

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

相关文章

通过HBase实现大规模日志数据存储与分析

通过HBase实现大规模日志数据存储与分析 I. 项目背景 随着互联网技术的迅速发展&#xff0c;各类应用和系统每天都会生成大量的日志数据。这些日志包括应用日志、服务器日志、数据库日志、安全日志等&#xff0c;它们不仅记录了系统的运行状况&#xff0c;还包含了许多关键的…

[NeetCode 150] Minimum Window With Characters

Minimum Window With Characters Given two strings s and t, return the shortest substring of s such that every character in t, including duplicates, is present in the substring. If such a substring does not exist, return an empty string “”. You may assum…

Apache HttpClient 和 OkHttpClient 的使用

概述 Apache HttpClient Apache HttpClient是一个开源的HTTP客户端库&#xff0c;提供了丰富的HTTP通信功能。它支持HTTP/1.1和HTTPS协议&#xff0c;具有连接池管理、重试机制、代理设置等高级特性。HttpClient的API设计虽然相对繁琐&#xff0c;但提供了高度的可配置性和灵…

Flutter主题最佳实践

Styling your Flutter app not only makes it visually appealing but also enhances the user experience. Flutter offers a robust theming system that helps you maintain consistency and customize your app’s look and feel. 设计 Flutter 应用程序的风格不仅能使其在…

E - Permute K times 2

E - Permute K times 2 思路 这题由于序列P是一个排列&#xff0c;所以将P表示成一个图的时候&#xff0c;这个图将由 m m m个环构成 对于每个环上的点来说&#xff0c;第一回合它会移动到距离它为 2 2 2的点上&#xff0c;距离它为 2 2 2的点同时也以相同的方式移动&#x…

机器视觉-相机、镜头、光源(总结)

目录 1、机器视觉光源概述 2、光源的作用 3、光谱 4、工业场景常见光源 4.1、白炽灯 4.2、卤素灯 4.3、 荧光灯 4.4、LED灯 4.5、激光灯 5、光源的基本性能 5.1、光通量 5.2、光效率 5.3、发光强度 5.4、光照度 5.5、均匀性 5.6、色温 5.7、显色性 6、基本光学…

【Linux | 网络I/O模型】五种网络I/O模型详解

1、数据传输过程 在 Linux 系统中&#xff0c;数据传输是通过 I/O 操作来实现的。I/O 操作是指数据从应用程序到内核&#xff0c;再到硬件设备&#xff08;如磁盘、网络接口&#xff09;的过程。 操作系统为了保护自己&#xff0c;设计了用户态、内核态两个状态。应用程序一般工…

基于云平台的智能家居管理系统设计与通信协议分析

案例 阅读以下关于 Web 系统架构设计的教述&#xff0c;在答题纸上回答问题1至问题3。 【说明】 某公司拟开发一个智能家居管理系统&#xff0c;该系统的主要功能需求如下: 1)用户可使用该系统客户端实现对家居设备的控制&#xff0c;且家居设备可向客户端反馈实时状态&#x…

js将图片复制到粘贴板上

这个方法目前受限与js的API的限制&#xff0c;只能针对jpg/jpeg/png进行粘贴&#xff0c;gif目前没有比较好的方法可以去粘贴&#xff0c;现将代码粘贴如下&#xff1a; // 通过 Canvas&#xff0c;我们可以将图像绘制到画布上&#xff0c;然后将其转换为支持的格式&#xff0…

Redis 线程控制 总结

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

MongoDB等保限制下的连接认证问题

目录 一、问题描述 二、解决方案 三、代码示例 四、拓展知识 一、问题描述 用户调整用户连接认证机制以满足等保要求,调整后程序连接mongodb失败。数据库日志报错如下: {"t":{"$date":"2024-10-10T14:39:07.825+08:00"},"s":&q…

力扣876:链表的中间结点

给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[3,4,5] 解释&#xff1a;链表只有一个中间结点&#xff0c;值为 3 。…

appium 的工作原理

** 安卓&#xff1a; ** 1.1 appuim 基于 uiautomator2 的原理 appium 服务启动后默认在 4723 端口上创建一个 http 服务&#xff0c;脚本通过服务地址 http://xxxx:4723/wd/hub 和 appium 进行通信 在 初 始 化 脚 本 和 appium 连 接 的 过 程 中 appium 会 向 手 机 就 …

JavaScript part2

一.前言 前面我们讲了一下js的基础语法&#xff0c;但是这些还是远远不够的&#xff0c;我们要想操作标签&#xff0c;实现一个动态且好看的页面&#xff0c;就得学会BOM和DOM&#xff0c;这些都是浏览器和页面的&#xff0c;这样我们才能实现一个好看的页面 二.BOM对象 BOM…

Radar Fields: Frequency-Space Neural Scene Representations for FMCW Radar 笔记

Code 主要思想 文章提出了一种新的神经场表示方法——Radar Fields&#xff0c;用于从FMCW&#xff08;调频连续波&#xff09;雷达数据中恢复场景几何信息。与以往的依赖于光学成像&#xff08;如RGB相机和LiDAR&#xff09;的神经场方法不同&#xff0c;该研究利用了雷达的…

深度生成模型 - 引言篇

前言 在人工智能的广阔领域中&#xff0c;深度生成模型作为一类强大的工具&#xff0c;正逐步引领着机器学习技术的新一轮变革。这些模型不仅能够从复杂的数据分布中学习到潜在的表示&#xff0c;还能够生成与训练数据相似甚至创新的新样本。深度生成模型的发展&#xff0c;不…

高级网络互联技术:AS3001与AS3000的路由交换方案

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

基于SSM的智能养生平台管理系统源码带本地搭建教程

技术栈与架构 技术框架&#xff1a;采用SSM&#xff08;Spring Spring MVC MyBatis&#xff09;作为后端开发框架&#xff0c;结合前端技术栈layui、JSP、Bootstrap与jQuery&#xff0c;以及数据库MySQL 5.7&#xff0c;共同构建项目。 运行环境&#xff1a;项目在JDK 8环境…

P6175 无向图的最小环问题

luoguP6175 无向图的最小环问题 无向图的最小环问题 题目描述 给定一张无向图&#xff0c;求图中一个至少包含 3 3 3 个点的环&#xff0c;环上的节点不重复&#xff0c;并且环上的边的长度之和最小。该问题称为无向图的最小环问题。在本题中&#xff0c;你需要输出最小的环…

HarmonyOS 5.0应用开发——应用打包HAP、HAR、HSP

【高心星出品】 目录 应用打包HAP、HAR、HSPModule类型HAPHAR创建HAR建立依赖HAR共享内容 HSP创建HSP建立依赖同上HSP共享内容同上 HAR VS HSP 应用打包HAP、HAR、HSP 一个应用通常会包含多种功能&#xff0c;将不同的功能特性按模块来划分和管理是一种良好的设计方式。在开发…