el-table-column叠加el-popover使用

embedded/2024/9/20 7:36:17/ 标签: vue.js, elementui, 前端

需求:el-table-column有一列展示多个tag信息,实现点击tag展示tag信息以及tag对应的详细信息

table的数据格式
data:[{...,isPopoverVisible:false,},{...,isPopoverVisible:false,},...
]

写法:

<el-table-column label="配置信息" prop="listName"><template slot-scope="scope"><el-popoverplacement="bottom"title="配置信息以及对应详情"trigger="manual"v-model="scope.row.isPopoverVisible"><el-cascader-panel :options="scope.row.CopyList"></el-cascader-panel><template slot="reference"><div @click="scope.row.isPopoverVisible = !scope.row.isPopoverVisible" style="cursor: pointer;"><div style="display: inline-block;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;width: 200px;"><el-tag type="info" style="margin-right: 5px;" v-for="item in scope.row.tableList" :key="item.index">{{ item.dbName }}</el-tag></div></div></template></el-popover></template>
</el-table-column>

实现了鼠标控制悬浮数据的显隐


http://www.ppmy.cn/embedded/9513.html

相关文章

字符数组和字符串题

1.字符数组(1-2) 下面的程序段将输出 ▁▁▁C▁▁ 。 char s[10] "abcd"; printf("%d\n", sizeof(s)); A.4 B.5 C.10 D.11 2.字符数组(1-3) 下面的程序段将输出 ▁▁C▁▁▁ 。 char s[] "abcd"; printf("%d\n", strlen(s))…

函数模板(Template)

文章目录 前言一、函数模版&#xff1f;函数模版的作用函数模版的语法函数模版的两种调用方法示例 总结 前言 在C中&#xff0c;模板&#xff08;Template&#xff09;是一种泛型编程工具&#xff0c;它允许程序员编写与类型无关的代码。通过使用模板&#xff0c;可以创建可重…

如何提高用户粘性?3步打造用户忠诚度!

众所周知&#xff0c;提高用户粘性对于很多企业或是个人来说&#xff0c;是非常重要的一个环节&#xff0c;只有建立起用户的忠诚度&#xff0c;才能够保持稳定的用户群体和持续的业务增长。那么&#xff0c;如何才能提高用户粘性呢&#xff1f; 接下来&#xff0c;我将为大家…

YOLOv8-PySide --- 基于 ultralytics 8.1.0 发行版优化 | 代码已开源

YOLOv8-PySide — 基于 ultralytics 8.1.0 发行版优化 Github 项目地址&#xff1a;https://github.com/WangQvQ/Ultralytics-PySide6 BiliBili视频地址&#xff1a;https://www.bilibili.com/video 页面效果 如何使用 pip install ultralytics8.1.0 or git clone --branch v…

[lesson44]继承中的访问级别

继承中的访问级别 继承中的访问级别 面向对象中的访问级别不只是public和private可以定义protected访问级别关键字protected的意义 修饰的成员不能被外界直接访问修饰的成员可以被子类直接访问 定义类时访问级别的选择 小结 面向对象中的访问级别不只是public和privatepro…

C# 语言类型(二)—预定义类型之字符串及字符类型简述

总目录 C# 语法总目录 参考链接&#xff1a; C#语法系列:C# 语言类型(一)—预定义类型值之数值类型 C#语法系列:C# 语言类型(二)—预定义类型之字符串及字符类型简述 C#语法系列:C# 语言类型(三)—数组/枚举类型/结构体 C#语法系列:C# 语言类型(四)—传递参数及其修饰符 C#语法…

基于HC32F460petb芯片给FLASH安装fat文件系统

FAT&#xff08;File Allocation Table&#xff09;文件系统是一种用于磁盘驱动器、USB闪存驱动器、软盘等存储设备的文件系统。FAT文件系统主要有两种变体&#xff1a;FAT12和FAT16&#xff0c;它们后来被FAT32所取代。FAT32文件系统是对FAT16的扩展&#xff0c;支持更大的文件…

Web3 隐私增强技术对比:探秘加密时代的数据安全与隐私保护

作者&#xff1a;Anders Dalskov&#xff08;博士&#xff0c;Partisia Blockchain 密码学科学家&#xff09; 来源&#xff1a;https://medium.com/partisia-blockchain/mpc-fhe-dp-zkp-tee-and-where-partisia-blockchain-fits-in-c8e051d053f7 编译&#xff1a;TinTinLand…

AI-数学-高中-39空间向量-2空间向量法(法向量)

原作者视频&#xff1a;【空间向量】【一数辞典】2空间向量法&#xff08;重要&#xff09;_哔哩哔哩_bilibili 法向量&#xff08;高中阶段所有与面的关系&#xff0c;都可以通过法向量去证明和解答&#xff09;&#xff1a; 是空间解析几何的一个概念&#xff0c;垂直于平面…

【matlab】计算机控制系统设计

本文基于中国MOOC上东北大学的《计算机控制系统设计》&#xff0c;完成的课程笔记&#xff0c;并无原创想法。 一、概述 1.1 本课程所需掌握的基础知识 数学基础知识&#xff08;高等数学、复变函数、矩阵理论&#xff09;专业基础知识&#xff08;自动控制原理、微机原理、实…

JIT在汽车行业中的革命性应用:颠覆传统制造模式,引领智能制造新时代

随着科技的飞速发展和市场竞争的日益激烈&#xff0c;汽车行业正面临着前所未有的变革。其中&#xff0c;准时制生产&#xff08;Just-In-Time&#xff0c;简称JIT&#xff09;作为一种先进的生产管理方式&#xff0c;已经在汽车行业中得到了广泛应用&#xff0c;成为推动汽车产…

OpenHarmony实战开发-MpChart图表实现案例。

介绍 MpChart是一个包含各种类型图表的图表库&#xff0c;主要用于业务数据汇总&#xff0c;例如销售数据走势图&#xff0c;股价走势图等场景中使用&#xff0c;方便开发者快速实现图表UI。本示例主要介绍如何使用三方库MpChart实现柱状图UI效果。如堆叠数据类型显示&#xf…

负采样重要吗?它的理论与应用综述

Does Negative Sampling Matter? A Review with Insights into its Theory and Applications 负采样重要吗&#xff1f;它的理论与应用综述 Does Negative Sampling Matter? A Review with Insights into its Theory and Applications Zhen Yang, Ming Ding, Tinglin Huang,…

【C语言】strstr函数刨析-----字符串查找

目录 一、strstr 函数介绍 ✨函数头文件&#xff1a; ✨函数原型&#xff1a; ✨函数解读 ✨功能演示 二、函数的原理以及模拟实现 ✨函数原理 ✨函数的模拟实现 三、strstr函数的注意事项 四、共勉 一、strstr 函数介绍 strstr函数是在一个字符串中查找另一个字符…

基于javaspringboot实现的垃圾分类网站

开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven…

Vue项目搭建和Element Plus

Vue项目搭建和Element Plus 1.0安装Vue项目&#xff0c;并且启动 创建项目 npm init vite安装依赖 npm i cd vue-project npm run server2.0配置vue端口号和vue自动启动项目&#xff0c;在文件vite.config.js中进行配置 import { defineConfig } from vite import vue fro…

XV6源码阅读——页表

文章目录 前言分页硬件实际转换 内核地址空间 前言 一个本硕双非的小菜鸡&#xff0c;备战24年秋招。打算尝试6.S081&#xff0c;将它的Lab逐一实现&#xff0c;并记录期间心酸历程。 代码下载 官方网站&#xff1a;6.S081官方网站 分页硬件 RISC-V指令&#xff08;用户和内…

SpringBoot项目整合Knife4j接口文档

文章目录 什么是接口文档&#xff1f;谁用接口文档为什么需要接口文档怎么做接口文档springboot如何整合knife4j?1.引入依赖2.在config目录下创建Knife4j配置依赖3.在appliacation.yml中进行配置4.启动Spring Boot工程&#xff0c;在浏览器中访问&#xff1a;http://localhost…

高级软考项目管理之项目进度管理

项目进度管理 规划进度管理:为规划、编制、管理、执行和控制项目进度而制定政策程序和文档的过程。 #mermaid-svg-AxNznqgNM9LuBQ9a {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-AxNznqgNM9LuBQ9a .error-icon{f…

缓解程序员工作压力的有效方法

程序员的工作性质通常伴随着高度的精神集中和持续的创新压力。为了保持高效和创新&#xff0c;同时维护个人健康和工作热情&#xff0c;缓解工作压力至关重要。本文将分享一些有效的方法&#xff0c;帮助程序员减轻工作压力&#xff0c;提高工作效率&#xff0c;保持创新能力&a…