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-popover
            placement="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.mfbz.cn/a/554397.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

部署Zabbix5.0

一.部署zabbix客户端 端口号10050 zabbix 5.0 版本采用 golang 语言开发的新版本客户端 agent2 。 zabbix 服务端 zabbix_server 默认使用 10051 端口&#xff0c;客户端 zabbix_agent2 默认使用 10050 端口。 1.1.关闭防火墙和selinux安全模块 systemctl disable --now fir…

python中的列表、元组、字典、集合(集合篇)

数据类型定义符号访问元素是否可变是否重复是否有序列表 [ ]索引可变可重复有序元组&#xff08;&#xff09;索引不可变可重复有序字典{key&#xff1a;value}键可变可重复无序集合{ }可变不可重复无序 基本概念 python语言中的集合是无序的、可变的容器类对象&#xff0c;所…

【Web】HTML基础

专栏文章索引&#xff1a;Web 有问题可私聊&#xff1a;QQ&#xff1a;3375119339 目录 一、HTML介绍 1.HTML 定义 2.标签语法 3.HTML 基本骨架 4.标签的关系 5.HTML 注释 二、标签 1.排版标签 1.1 标题标签 1.2 段落标签 1.3 换行标签 1.4 水平线标签 1.5 文本格…

Python学习(四)

文件操作 想想我们平常对文件的基本操作&#xff0c;大概可以分为三个步骤(简称文件操作三步走): ① 打开文件 ② 读写文件 ③ 关闭文件 注意:可以只打开和关闭文件&#xff0c;不进行任何读写 在Python&#xff0c;使用open函数&#xff0c;可以打开一个已经存在的文件&…

4.16作业

1.总结keil5下载代码和编译代码需要注意的事项 一、在编译代码时需要先点击魔术棒点击 修改flash Downlond 和pack 二、可以通过F12转跳到对应的函数中&#xff0c;查看函数的原型 三、注释出现乱码通过 Edit中的中的来修改 四、要先bulid在load 2.总结STM32Cubemx的使用方…

【UE 材质】表面湿润效果

效果 步骤 1. 创建一个材质函数&#xff0c;这里命名为“MF_Weather_Wetness”&#xff0c;打开材质函数添加如下节点 其中输入的默认值分别为&#xff1a; 其中&#xff0c;“Desaturation”节点用于控制饱和度&#xff0c;我们通过给“Fraction”引脚输入一个负值来增加饱和…

【AR开发示例】实现AR管线巡检

写在前面的话 这是一篇旧文档&#xff0c;代码仓库见 https://gitee.com/tanyunxiu/AR-pipe 本文档是基于超图移动端SDK的AR模块开发的示例&#xff0c;仅供参考&#xff0c;SDK在持续迭代中&#xff0c;相关描述可能有变化。 示例介绍 这是一个使用AR查看墙内管线的基础示…

授权协议OAuth 2.0之除了授权码许可还有什么授权流程?

写在前面 源码 。 本文看下OAuth2.0的另外3中授权流程&#xff0c;资源拥有者凭据许可&#xff0c;客户端许可&#xff0c;隐式许可。分别看下具体的使用流程以及该使用场景。 1&#xff1a;资源拥有者凭据许可 资源拥有者凭据许可&#xff0c;这里资源拥有者的凭据是什么呢&…

【C++核心】面向对象的三大特性

面向对象的三大特性 一、封装性1. 封装性的意义1.1 表现事物1.2 权限控制1.3 成员属性设置为私有 2. 封装性的衍生知识2.1 struct和class区别2.2 友元2.2.1 全局函数做友元2.2.2 类做友元2.2.3 成员函数做友元 二、继承性1. 继承的语法2. 继承方式3. 继承中的对象模型3.1 说明3…

17 如何查看Hadoop中wordCount源码

1.进入官网下载源码并进行解压操作&#xff1a; 我们使用的是hadoop-3.1.4版本&#xff0c;直接进入官网进行下载&#xff1a;https://archive.apache.org/dist/hadoop/common/hadoop-3.1.4/ 下载得到的文件如下图所示&#xff1a; 解压后的文件&#xff1a; 2.使用Idea打开此项…

vue3.0项目生成标签条形码(插件:jsbarcode)并打印(插件:Print.js)支持pda扫码枪扫描

文章目录 功能场景生成条形码设置打印功能踩坑 功能场景 功能场景&#xff1a;供应链中对一些货品根据赋码规则进行赋码&#xff0c;赋码之后生成根据赋码结果生成条形码&#xff0c;执行打印功能&#xff0c;贴在货品之上&#xff0c;打印之后可以用pda的手枪进行扫描&#x…

(亲测有效)win7安装nodejs高版本(18.8.0)

现在学习vue3,vite,使用pnpm创建项目都需要高版本的nodejs了&#xff0c;win7最高只能安装13版本&#xff0c;好多已经不支持了。当然此篇只是以安装18.8.0为例&#xff0c;可以替换成更高的18或者20版本&#xff0c;只是太高的话可能出现冲突&#xff0c;够用就好。希望对各位…

如何修改WordPress数据库表前缀以提高安全性

WordPress作为世界上最受欢迎的内容管理系统之一&#xff0c;吸引了数以百万计的用户。然而&#xff0c;正因为其广泛的使用&#xff0c;WordPress网站也成为了黑客攻击的目标之一。其中一个最常见的安全漏洞是使用默认的数据库表前缀wp_&#xff0c;使得黑客能够更轻松地进行大…

分布式调度器

xxl-job介绍 xxl-job 是一个轻量级分布式任务调度框架&#xff0c;支持动态添加、修改、删除定时任务&#xff0c;支持海量任务分片执行&#xff0c;支持任务执行日志在线查看和分页查询&#xff0c;同时支持任务失败告警和重试机制&#xff0c;支持分布式部署和高可用。xxl-j…

亚马逊云科技官方重磅发布GenAI应用开发学习路线(全免费)

今天小李哥给大家分享的是亚马逊云科技&#xff08;AWS&#xff09;最近官方发布的GenAI应用开发最佳学习路线&#xff0c;不仅内容非常全面更主要的是全部免费&#xff01;大家动动小手就能成为GenAI开发大&#x1f42e;&#xff01; 1️⃣这个GenAI开发学习路线包括什么&…

跟着Datawhale重学数据结构与算法(2)———数组知识

数组定义 数组是一种数据结构&#xff0c;用于存储一系列相同类型的元素。在大多数编程语言中&#xff0c;数组中的每个元素都有一个索引&#xff0c;通常从0开始。 数组的特点 固定大小&#xff1a;一旦定义&#xff0c;数组的大小通常是固定的&#xff0c;不能动态增减。相…

虚拟机数据恢复—KVM虚拟机磁盘文件数据恢复案例

虚拟化数据恢复环境&故障&#xff1a; KVM是Kernel-based Virtual Machine的简称&#xff0c;是一个开源的系统虚拟化模块&#xff0c;自Linux2.6.20版本之后集成在Linux的各个主要发行版本中。KVM使用Linux自身的调度器进行管理。 本案例中的服务器操作系统为Linux&#x…

官宣|Apache Paimon 毕业成为顶级项目,数据湖步入实时新篇章!

北京时间 2024 年 4 月 16日&#xff0c;开源软件基金会 Apache Software Foundation&#xff08;以下简称 ASF&#xff09;正式宣布 Apache Paimon 毕业成为 Apache 顶级项目(TLP, Top Level Project)。经过社区的共同努力和持续创新&#xff0c;Apache Paimon 在构建实时数据…

【剪映专业版】10时间线工具:主轨磁吸、自动吸附、联动、预览轴、全局缩放预览

视频课程&#xff1a;B站有知公开课【剪映电脑版教程】 主轨&#xff1a;有封面标志的轨道才是主轨。 主轨磁吸&#xff1a;开启后&#xff0c;在主轨上移动素材&#xff0c;自动向前磁吸&#xff0c;在其他轨道上移动无此效果&#xff1b;关闭后&#xff0c;不自动向前磁吸&…

艾迪比皮具携手工博科技SAP ERP公有云,打造数字化转型新标杆

4月1日&#xff0c;广州市艾迪比皮具有限公司&#xff08;以下简称“艾迪比”&#xff09;SAP S/4HANA Cloud Public Edition&#xff08;以下简称“SAP ERP公有云”&#xff09;项目正式启动。双方项目组领导、成员出席本次项目启动会&#xff0c;为未来项目的顺利实施打下坚实…
最新文章