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

需求: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.mzph.cn/bicheng/463.shtml

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

相关文章

死磕GMSSL通信-C/C++系列(一)

死磕GMSSL通信-C/C++系列(一) 最近再做国密通信的项目开发,以为国密也就简单的集成一个库就可以完事了,没想到能有这么多坑。遂写下文章,避免重复踩坑。以下国密通信的坑有以下场景 1、使用GMSSL guanzhi/GmSSL进行通信 2、使用加密套件SM2-WITH-SMS4-SM3 使用心得 ​…

【个人博客搭建】(3)添加SqlSugar ORM 以及Json配置文件读取

1、安装sqlsugar。在models下的依赖项那右击选择管理Nuget程序包&#xff0c;输入sqlsugarcore&#xff08;因为我们用的是netcore&#xff0c;而不是net famework所以也对应sqlsugarcore&#xff09;&#xff0c;出来的第一个就是了&#xff0c;然后点击选择版本&#xff0c;一…

ABAP 提示框 汇总

文章目录 前言 1.POPUP_TO_DISPLAY_TEXT 2.POPUP_TO_CONFIRM 3.G_DISPLAY_SELECTION_DYNPRO 4.REUSE_ALV_POPUP_TO_SELECT 5.POPUP_TO_DECIDE_LIST 6.POPUP_WITH_TABLE_DISPLAY_OK 7.BKK_POPUP_DISPLAY_LIST 8. POPUP_TO_CONFIRM_WITH_MESSAGE 9.POPUP_TO_CONFIRM 1…

MinIO + Prometheus + Grafana docker部署

文章目录 说明MinIO简介MinIO 容器化部署Prometheus服务地址配置方法一&#xff1a;先部署后修改方法二&#xff1a;部署时修改compose文件&#xff08;未验证&#xff09; MinIO Access Key配置Prometheus 容器化部署MinIO 生成抓取配置修改Prometheus配置文件Grafana 容器化部…

python3.poc。sqlmapTamperPocsuite

目的&#xff0c;掌握工具的api接口&#xff0c;框架工具二次开发 ---sqlmap的api接口&#xff1a;https://www.freebuf.com/articles/web/204875.html 应用&#xff1a;配合前期信息收集的到可能存在注入点的地方&#xff0c;批量化的去扫描 #开发当前项目过程&#xff1a…

YOLOv8改进 | Conv篇 | CVPR2024最新DynamicConv替换下采样(包含C2f创新改进,解决低FLOPs陷阱)

一、本文介绍 本文给大家带来的改进机制是CVPR2024的最新改进机制DynamicConv其是CVPR2024的最新改进机制,这个论文中介绍了一个名为ParameterNet的新型设计原则,它旨在在大规模视觉预训练模型中增加参数数量,同时尽量不增加浮点运算(FLOPs),所以本文的DynamicConv被提出…

华为OD-C卷-靠谱的车[100分]C语言-100%

题目描述 程序员小明打了一辆出租车去上班。出于职业敏感,他注意到这辆出租车的计费表有点问题,总是偏大。 出租车司机解释说他不喜欢数字4,所以改装了计费表,任何数字位置遇到数字4就直接跳过,其余功能都正常。 比如: 23再多一块钱就变为25;39再多一块钱变为50;399…

VictoriaMetrics安装部署

安装部署 1、 去 vm release 下载编译好的二进制版本&#xff0c;比如我们选择下载 v1.69.0 amd64。 2、 解压缩后得到&#xff1a; $ ls -l vm*-prod -rwxr-xr-x 1 work work 10946416 Nov 8 22:03 vminsert-prod* -rwxr-xr-x 1 work work 13000624 Nov 8 22:03 vmselect…

书生·浦语大模型全链路开源体系-第6课

书生浦语大模型全链路开源体系-第6课 书生浦语大模型全链路开源体系-第6课相关资源Lagent & AgentLego 智能体应用搭建环境准备创建虚拟环境安装LMDeploy安装 Lagent安装 AgentLego Lagent 轻量级智能体框架使用 LMDeploy 部署启动并使用 Lagent Web Demo使用自定义工具获取…

倾斜摄影技术的特点及应用有哪些?

倾斜摄影测量技术&#xff08;Oblique Photogrammetry&#xff09;是一种通过使用倾斜角度相机拍摄图像的方法来进行测量和建模的技术。与传统的垂直摄影测量技术不同&#xff0c;倾斜摄影测量技术通过使用摄影机倾斜角度相对于垂直方向较大的角度来拍摄图像&#xff0c;从而能…

博客系统ssm

.博客功能 主要功能实现 首页有最新文章排版&#xff0c;最新评论留言&#xff0c;每日一言&#xff0c;标签云&#xff0c;网站信息等等文章模块有文章分类&#xff0c;归档&#xff0c;标签等功能&#xff0c;支持点击进入相应文章&#xff0c;都支持评论留言友链支持一些大佬…

ospf综合路由实验

1配置ip 2配置私网通&#xff08;配置双向验证&#xff09; 3配置静态缺省,公网通&#xff08;nat配置后因为没有缺省所以通不了&#xff0c;要么配置缺省要么配置特殊区域自动下发缺省&#xff09;配置mgre 4链路聚合&#xff0c;配置特殊区域&#xff0c;更改hello更新时间 …

基于Material Design风格开源、易用、强大的WPF UI控件库

前言 今天大姚给大家分享一款基于Material Design风格开源、免费&#xff08;MIT License&#xff09;、易于使用、强大的WPF UI控件库&#xff1a;MaterialDesignInXamlToolkit。 项目介绍 MaterialDesignInXamlToolkit 是一个开源、易于使用、强大的 WPF UI 控件库&#x…

OpenHarmony多媒体-mp4parser

简介 一个读取、写入操作音视频文件编辑的工具。 编译运行 1、通过IDE工具下载依赖SDK&#xff0c;Tools->SDK Manager->Openharmony SDK 把native选项勾上下载&#xff0c;API版本>10 2、开发板选择RK3568&#xff0c;ROM下载地址. 选择开发板类型是rk3568&#xf…

美团财务科技Java后端一面:面向对象、类加载过程、全限定类名相同的类是否可以同时被加载

更多大厂面试内容可见 -> http://11come.cn 美团财务科技Java后端一面&#xff1a;面向对象、类加载过程、全限定类名相同的类是否可以同时被加载 如何理解面向对象&#xff1f; 面向对象 是具有对象概念的编程范式&#xff0c;面向对象将程序实现分为了一个个独立的对象&…

Liunx常用命令

Liunx常用命令 1、less less 是一个用于查看文件内容的终端分页器&#xff0c;它允许您以一页一页的方式浏览文件内容&#xff0c;并提供了多种交互方式来进行导航和搜索。 以下是一些 less 命令的常用用法&#xff1a; 启动 less&#xff1a; less filename这将在终端中打开指…

顶顶通呼叫中心中间件(mod_cti基于FreeSWITCH)-解决方案:运行了 Freeswitch 的服务器攻击问题

文章目录 前言联系我们攻击实例解决方案安装 fail2ban编辑jail.conf设置日志文件权限设置filterfail2ban 操作 前言 运行在公网的 Freeswitch 服务器&#xff0c;每天都会接收到很多恶意的呼叫请求和注册请求&#xff0c;从而尝试盗打电话。每天大量的攻击&#xff0c;会导致 …

数字时代安全风险防范与保密科技创新

文章目录 前言一、新技术应用带来的保密挑战1.1 通过技术手段获取国家秘密和重要情报日益普遍1.2 新型信息技术存在的风险不容忽视 二、加强保密科技创新的必要性2.1 提高定密准确性2.2 及时变更密级或解密2.3 对失泄密事故案件进行自动高效的预警和初步处理 三、保密科技创新中…

Qt-饼图示范

1.效果图 2.代码如下 2.1 .h文件 #ifndef PIECHARTWIDGET_H #define PIECHARTWIDGET_H#include <QWidget> #include <QChartView> #include <QPieSeries>#include<QVBoxLayout> #include<QMessageBox> #include <QtCharts>struct PieDat…

游戏引擎技术——前向渲染与延迟渲染

作者&#xff1a;yangkuKO 一、前言 2015年5月&#xff0c;3A巨作《巫师3&#xff1a;狂猎&#xff08;The Witcher 3&#xff1a;Wild Hunt&#xff09;》横空出世&#xff0c;该游戏作为一款开放世界的角色扮演游戏&#xff0c;其巨大的开放世界、绵长的剧情故事、画面精美…