el-tab-pane 和el-tooltip及el-tree 组合使用

<el-tabs v-model="groupId" @tab-click="handleClick"><el-tab-pane label="全部" name="0"></el-tab-pane><el-tab-pane  v-for="items in editableTabs" :key="items.group_id" :name="items.id"><el-tooltip  popper-class="el-popover el-popper" effect="light"  placement="bottom" slot="label"><div slot="content"><el-tree  v-if="items.childTreeList != null":data="items.childTreeList" :props="{value: 'id',label: 'group_name', children: 'childTreeList',}" @node-click="handleTreeClick":default-expand-all="true"></el-tree></div><span>{{ items.group_name }}</span></el-tooltip></el-tab-pane></el-tabs>
//切换体系handleClick(tab){this.groupId =tab.name;this.search();},//切换体系树下的分类handleTreeClick(node){this.groupId =node.id;this.search();},

这里主要是在el-tab-pane中的label属性不给赋值,单独写在el-tooltip中,使用span去写当前的名称,就可以实现鼠标放上去,浮现树的效果。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/13384.html

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

相关文章

java项目之美食推荐管理系统(ssm+mysql+jsp)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的美食推荐管理系统。 开发环境&#xff1a; 后端&#xff1a; 开发语言&#xff1a;Java 框架&#xff1a;ssm&#xff0c;mybatis JDK版…

2.3 Web应用 -1 web 应用概述

2.3 Web应用 -1 web 应用概述 Web与HTTPHTTP协议概述 Web与HTTP World Wide Web: Tim Berners-Lee 网页网页互相链接 网页(Web Page)包含多个对象(objects) 对象&#xff1a;HTML文件、JPEG图片、视频文件、动态脚本等基本HTML文件&#xff1a;包含对其他对象引用的链接 对象的…

【MongoDB】

目录 MongoDB基本简介 MongoDB基本概念 MongoDB和关系数据库的对比 MongoDB数据类型 MongoDB元素命名规则 MongoDB安装部署 MongoDB配置管理 MongoDB服务管理 MongoDB 多实例配置 基本操作 集合 数据备份与恢复 MongoDB复制集集群部署及管理 MongoDB复制集ReplSe…

OPCUA 的历史数据库/聚合服务器的实现细节

进入了AI 大数据时代&#xff0c;无论是工业自动化系统&#xff0c;还是物联网系统&#xff0c;对大数据的采集&#xff0c;存储和分析都十分重要。大数据被称为工业的石油&#xff0c;未来制造业的持续改善离不开大数据。 传统的应用中&#xff0c;历史数据的存储是特定的数据…

Oracle存储过程的使用DEMO(一)

文章目录 Oracle存储过程的使用DEMO&#xff08;一&#xff09;1. Oracle中块的使用2. IF使用2.1 IF...ELSE...2.2 IF嵌套 3. CASE...WHEN...4. LOOP5. WHILE6. FOR Oracle存储过程的使用DEMO&#xff08;一&#xff09; 1. Oracle中块的使用 DECLAREI NUMBER; BEGINSELECT EM…

TPCE260PCIE转PMC载板

TPCE60是一个标准的高度PCI Express版本1.1兼容的模块&#xff0c;提供了一个槽用于安装标准PMC模块&#xff0c;灵活和成本有效的I/O解决方案的各种应用如过程控制、医疗系统、电信和交通控制。 桥接PCI Express x1连接到主机板和PCI总线信号的PMC槽之间是由透明的PCIe到PCI桥…

硬件性能 - 网络瓶颈分析

简介 本文章主要通过Linux命令查看网络信息、判断是否出现网络瓶颈等简单分析方法。其他硬件性能分析如下&#xff1a; 1. 硬件性能 - CPU瓶颈分析 2. 硬件性能 - 掌握内存知识 3. 硬件性能 - 磁盘瓶颈分析 目录 1. 监控命令 sar 2. 带宽利用率 3. 网络延迟 4. 网络连接数 …

云原生之深入解析K8S Istio Gateway服务的架构分析与实战操作

一、概述 Istio 提供一种简单的方式来为已部署的服务建立网络&#xff0c;该网络具有负载均衡、服务间认证、监控、网关等功能&#xff0c;而不需要对服务的代码做任何改动。 istio 适用于容器或虚拟机环境&#xff08;特别是 k8s&#xff09;&#xff0c;兼容异构架构&#x…

MV-Map论文研读

MV-Map MV-Map: Offboard HD-Map Generation with Multi-view Consistency 论文&#xff1a;https://arxiv.org/pdf/2305.08851.pdf code&#xff1a;https://github.com/ZiYang-xie/MV-Map 代码未开源 总体网络结构 简述 论文首次提出以非车载的方式产生高精度地图。可以…

5、加载3dtileset模型并定位到模型

这一节使用CCesium加载3dtiles模型&#xff0c;3dtiles模型使用ceisum官网示例中的模型&#xff0c;加载3dtiles功能目前只能添加没有压缩的模型&#xff0c;draco或其他解压缩功能没有写。 1、在上一个例子的基础上&#xff0c;将鼠标事件改成右键的鼠标事件Cesium::ScreenSp…

一篇文章让你搞懂指针笔试题(加深对指针的理解)

指针笔试题 笔试题1 #include<stdio.h> int main() {int a[5] { 1, 2, 3, 4, 5 };int* ptr (int*)(&a 1);printf("%d,%d", *(a 1), *(ptr - 1));//程序的结果是什么&#xff1f;return 0; }给定一个数组a&#xff0c;当我们取地址a的时候&#xff0c…

网络关键设备和网络安全专用产品目录-2023年7月

2023年7月3日&#xff0c;网络关键设备和网络安全专用产品目录&#xff08;一级&#xff09;终于更新了&#xff0c;增加到38类&#xff0c;大家想了解每类产品对应哪家检测机构、以及涉及相关的标准、分解的二级产品目录&#xff0c;可以联系龙域认证客服。 一、网络关键设备…