当前位置: 首页 > news >正文

el-table实现展开当前行时收起上一行的功能

<el-tableref="tableRef":data="tableData":expand-row-keys="expandRowKeys":row-key="handleRowKey"   // 必须指定 row-key@expand-change="handleExpandChange" // 当用户对某一行展开或者关闭的时候会触发该事件>
</el-table>
props: {idName: {type: String,default: "id",}, // 表格行的唯一标识
},data() {return {ids: [], // 选中的行的ids数组expandRowKeys: [], // 存储展开行的 keys};},methods: {handleRowKey(row) {return row[this.idName];},/*** @Event 当用户对某一行展开或者关闭的时候会触发该事件* @description: 展开行时,回调的第二个参数为 expandedRows;树形表格时第二参数为 expanded* @author: mhf* @time: 2023-11-12 14:08:29**/handleExpandChange(row) {const rowKey = row[this.idName]; // 如果不写idName可以自己指定,如 rowKey = "id"if (this.expandRowKeys === [] || this.expandRowKeys.length === 0) {// 如果没有行展开,则添加当前行的 key 到 expandRowKeys 中this.expandRowKeys.push(rowKey);} else {// 如果已经有行被展开,就收起上一行if (this.expandRowKeys.includes(rowKey)) {// 如何再次点击当前行,就收起当前行this.expandRowKeys = [];} else {// 第一次点击这一行,就将当前行的 key 放入 expandRowKeys 中this.expandRowKeys = [rowKey];}}},
}

相关文章:

el-table实现展开当前行时收起上一行的功能

<el-tableref"tableRef":data"tableData":expand-row-keys"expandRowKeys":row-key"handleRowKey" // 必须指定 row-keyexpand-change"handleExpandChange" // 当用户对某一行展开或者关闭的时候会触发该事件> <…...

Go的优雅退出

Go优雅退出/停机以前主要通过signal来实现&#xff0c;当然现在也是通过signal来实现&#xff0c;只是从go 1.16开始&#xff0c;新增了更加友好的API: func NotifyContext(parent context.Context, signals ...os.Signal) (ctx context.Context, stop context.CancelFunc) 该…...

【KVM-6】KVM/QEMU软件栈

前言 大家好&#xff0c;我是秋意零。 &#x1f47f; 简介 &#x1f3e0; 个人主页&#xff1a; 秋意零&#x1f525; 账号&#xff1a;全平台同名&#xff0c; 秋意零 账号创作者、 云社区 创建者&#x1f9d1; 个人介绍&#xff1a;在校期间参与众多云计算相关比赛&#x…...

硬件知识2

原理图的检查&#xff1a; 网络悬浮 单端网络 电源悬浮&#xff08;电源和地&#xff09; 重复的位号 网络短路&#xff08;电源和地&#xff09; AD里面双击messages里面的错误项会直接进入到原理图和PCB…...

【Java 进阶篇】JQuery DOM操作:通用属性操作的绝妙魔法

在前端的舞台上&#xff0c;JQuery犹如一位魔法师&#xff0c;为我们展现了操纵HTML元素的奇妙技巧。而在这个技巧的精妙组成中&#xff0c;通用属性操作是一门绝妙的魔法。在本篇博客中&#xff0c;我们将深入研究JQuery DOM操作中的通用属性操作&#xff0c;揭示这段魔法的神…...

在任何机器人上实施 ROS 导航堆栈的指南

文章目录 路径规划参考 路径规划 路径规划是导航的最终目标。这允许用户向机器人给出目标姿势&#xff0c;并让它在给定的环境中自主地从当前位置导航到目标位置。这是我们迄今为止所做的一切&#xff08;地图绘制和本地化&#xff09;的汇集点。ROS 导航堆栈已经为我们完成了…...

Android 中注解的使用

Android Support Library 从 19.1 版本开始引入了一个新的注解库&#xff0c;其中包含了很多的元注解&#xff0c;使用它们修饰我们的代码&#xff0c; 可以让我们提高程序的开发效率&#xff0c;让我们更早的发现问题。以及对代码施以规范&#xff0c;让代码更加有可读性。这篇…...

我国陆地遥感卫星发展现状与展望

一、引言 从20世纪90年代末至今&#xff0c;我国陆地遥感卫星事业历经二十多年&#xff0c;实现了从无到有、从小到大、从弱到强的跨越发展。随着高分辨率对地观测系统重大专项&#xff08;高分专项&#xff09;、《陆海观测卫星业务发展规划&#xff08;2011—2020年&#xff…...

arcgis基础篇--实验

一、绘制带空洞的面要素 方法一&#xff1a;先绘制出一个面区域&#xff0c;然后在面上再绘制一个面区域代表面洞&#xff0c;两者位于同一个图层内&#xff0c;选中代表面洞的区域&#xff0c;选择【编辑器】-【裁剪】工具&#xff0c;将面裁剪出一个洞&#xff0c;随后删除代…...

【chatglm3】(3):在AutoDL上,使用4090显卡,部署ChatGLM3API服务,并微调AdvertiseGen数据集,完成微调并测试成功!附视频演示。

在AutoDL上&#xff0c;使用4090显卡&#xff0c;部署ChatGLM3API服务&#xff0c;并微调AdvertiseGen数据集&#xff0c;完成微调并测试成功&#xff01; 其他chatgpt 和chatglm3 资料&#xff1a; https://blog.csdn.net/freewebsys/category_12270092.html 视频地址&#…...

python爬虫top250电影数据

之前看到的&#xff0c;我改了一下&#xff0c;多了很多东西 import requests from bs4 import BeautifulSoup from openpyxl import Workbook from openpyxl.styles import Font import redef extract_movie_info(info):# 使用正则表达式提取信息pattern re.compile(r导演:…...

STL简介+浅浅了解string——“C++”

各位CSDN的uu们好呀&#xff0c;终于到小雅兰的STL的学习了&#xff0c;下面&#xff0c;让我们进入CSTL的世界吧&#xff01;&#xff01;&#xff01; 1. 什么是STL 2. STL的版本 3. STL的六大组件 4. STL的重要性 5. 如何学习STL 6.STL的缺陷 7.为什么要学习string类 …...

wpf 和winform 的区别

WPF (Windows Presentation Foundation) 和 WinForms (Windows Forms) 是 Microsoft .NET 桌面应用程序开发中两种不同的技术框架&#xff0c;它们有一些重要的区别&#xff1a; 1. **UI 抽象层次结构:** - **WinForms:** 使用基于控件&#xff08;Controls&#xff09;的 …...

【Apifox】国产测试工具雄起

在开发过程中&#xff0c;我们总是避免不了进行接口的测试&#xff0c; 而相比手动敲测试代码&#xff0c;使用测试工具进行测试更为便捷&#xff0c;高效 今天发现了一个非常好用的接口测试工具Apifox 相比于Postman&#xff0c;他还拥有一个非常nb的功能&#xff0c; 在接…...

PNAS | 蛋白质结构预测屈服于机器学习

今天为大家介绍的是来自James E. Rothman的一篇短文。今年的阿尔伯特拉斯克基础医学研究奖表彰了AlphaFold的发明&#xff0c;这是蛋白质研究历史上的一项革命性进展&#xff0c;首次提供了凭借序列信息就能够准确预测绝大多数蛋白质的三维氨基酸排列的实际能力。这一非凡的成就…...

PlayCanvas通过IFrame嵌入页面如何与canvasplay脚本通讯

PlayCanvas可以通过IFrame嵌入HTML页面&#xff0c;实现混合编程&#xff0c;扩充PlayCanvas的页面功能。 问&#xff1a;在IFrame嵌入页面中如何与PlayCanvas通讯&#xff0c;调用PlayCanvas功能&#xff1f; 答&#xff1a;可以调用PlayCanvas的全局对象pc来访问其他脚本&…...

springboot整合Redis后间歇性io.lettuce.core.RedisCommandTimeoutException

在springboot中引入spring-boot-starter-data-redis依赖时&#xff0c;默认使用的时Lettuce 产生这种问题的原因有如下两点&#xff1a; 1、Lettuce 自适应拓扑刷新&#xff08;Adaptive updates&#xff09;与定时拓扑刷新&#xff08;Periodic updates&#xff09; 是默认关闭…...

基于springboot+vue的学生毕业离校信息网站

项目介绍 该学生毕业离校系统包括管理员、学生和教师。其主要功能包括管理员&#xff1a;首页、个人中心、学生管理、教师管理、离校信息管理、费用结算管理、论文审核管理、管理员管理、留言板管理、系统管理等&#xff0c;前台首页&#xff1b;首页、离校信息、网站公告、留…...

基于C#+WPF编写的调用讯飞星火大模型工具

工具源码&#xff1a;https://github.com/lishuangquan1987/XFYun.SparkChat 工具效果截图&#xff1a; 支持流式输出: 其中ApiKey/ApiSecret/AppId需要自己到讯飞星火大模型官网去注册账号申请&#xff0c;免费的。 申请地址&#xff1a;https://xinghuo.xfyun.cn/ 注册之…...

科普测量开关电源输出波形的三种方法及电源波形自动化测试步骤

开关电源波形测试就是对开关电源的输出波形进行检测和分析&#xff0c;观察开关电源参数变化&#xff0c;以此来判断开关电源的性能是否符合要求。好的开关电源对于设备以及整个电路的正常运行是非常重要的&#xff0c;因此开关电源输出波形测试是开关电源测试的重要环节&#…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型

在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重&#xff0c;适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解&#xff0c;并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...

相关类相关的可视化图像总结

目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系&#xff0c;可直观判断线性相关、非线性相关或无相关关系&#xff0c;点的分布密…...