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去写当前的名称,就可以实现鼠标放上去,浮现树的效果。

在这里插入图片描述

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

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

相关文章

MySQL注入-SQLi-Less1笔记

前置知识点&#xff1a; 1. SELECT 1,2,3 用于查询数据通道的方式 例如Less-1中,Secury数据库中的users表结构如下&#xff0c;可以看到有散列&#xff0c;当用户在页面输入id的时候&#xff0c;会查询到对应的散列数据也就是<id>/<username>/<password>&a…

分布式监控zabbix的使用(一)

zabbix 一、添加zabbix客户端主机&#xff0c;测试是否能连接服务端和客户端都设置 hosts 解析设置 zabbix 的下载源&#xff0c;安装 zabbix-agent2修改 agent2 配置文件通过键值测试连通性在 Web 页面中添加 agent 主机 二、自定义监控内容在客户端创建自定义key 三、在web页…

Lion:闭源大语言模型的对抗蒸馏

Lion&#xff1a;闭源大语言模型的对抗蒸馏 Lion&#xff0c;由香港科技大学提出的针对闭源大语言模型的对抗蒸馏框架&#xff0c;成功将 ChatGPT 的知识转移到了参数量 7B的 LLaMA 模型&#xff08;命名为 Lion&#xff09;&#xff0c;在只有 70k训练数据的情况下&#xff0…

微服务网关技术选型:Zuul2、Gateway、OpenResty、Kong

1、简介 当使用单体应用程序架构时&#xff0c;客户端&#xff08;Web 或移动端&#xff09;通过向后端应用程序发起一次 REST 调用来获取数据。负载均衡器将请求路由给 N 个相同的应用程序实例中的一个。然后应用程序会查询各种数据库表&#xff0c;并将响应返回给客户端。微…

443端口被占用,vmware居然也来捣乱

今天搬砖时发现应用起不来了&#xff0c;显示出了熟悉的error *************************** APPLICATION FAILED TO START ***************************~~重点在这块哈 Description:Web server failed to start. Port 443 was already in use.Action:Identify and stop the p…

Modbus tcp转ETHERCAT在Modbus软件中的配置方法

Modbus tcp和ETHERCAT是两种不同的协议&#xff0c;这给工业生产带来了很大的麻烦&#xff0c;因为这两种设备之间无法通讯。但是&#xff0c;远创智控YC-ECT-TCP网关的出现&#xff0c;却为这个难题提供了解决方案。 YC-ECT-TCP网关能够连接到Modbus tcp总线和ETHERCAT总线中…

Android之WebView加载PDF链接预览PDF文件

文章目录 前言一、效果图二、实现步骤1.在项目main目录下新建一个assets2.新建一个js为index.js3.新建一个HTML为index.html4.xml布局4.Activity类&#xff08;kotlin&#xff09;5.Activity类&#xff08;Java&#xff09; 总结 前言 Android的webview压根就不支持加载pdf&am…

基于单片机的智能空调系统的设计与实现

功能介绍 以51单片机作为主控系统&#xff1b;LCD1602液晶显示当前水温&#xff0c;定时提醒&#xff0c;水量变化DS18B20检测当前水体温度&#xff1b;水位传感器检测当前水位&#xff1b;继电器驱动加热片进行水温加热&#xff1b;定时提醒喝水&#xff0c;蜂鸣器报警&#x…

详解HTTP协议和HTTPS协议

目录 一.HTTP协议 1.什么是HTTP 2.HTTP发展历史 3.HTTP请求和响应 4. 抓包的方式和工具Fiddler 1.开发者工具 2.Fiddler 二.请求和响应 1.请求和响应报文 2.URL结构 3.常见的方法 1.GET方法 2.POST方法 3.其他方法 三.请求报头(header) 1.Host 2.Content-Length 3.Co…

python自动化办公——定制化将电子签名批量签写到PDF文件

python自动化办公——定制化将电子签名批量签写到PDF文件 文章目录 python自动化办公——定制化将电子签名批量签写到PDF文件1、安装依赖2、需求分析3、代码 1、安装依赖 首先需要下载所需要的库 pip install pdf2image pip install img2pdf pip install opencv-python此外还…

vue + el-table点击表头改变其当前样式

废话不多说&#xff0c;先看效果&#xff1a; 网上找了一大圈没有符合的&#xff0c;只能自己看着搞&#xff1a; 直接贴代码&#xff1a; <el-tableref"table":data"tableData"borderstripesort-change"changeColumn"><el-table-colu…

springMVC(二)—— 进阶

一、解决中文乱码问题 解决中文乱码问题的关键在于判断字符是什么时候乱码的 先在java程序里刚生成这个值的地方打印一下&#xff0c;如果在控制台输出就乱码了&#xff0c;那就排除浏览器和jsp页面的编码出问题。否则 看浏览器的编码 看这个jsp页面的编码是否设置好了 一般不用…

简要介绍 | 两阶段点云目标检测:理论与实践

注1&#xff1a;本文系“简要介绍”系列之一&#xff0c;仅从概念上对两阶段点云目标检测进行非常简要的介绍&#xff0c;不适合用于深入和详细的了解。 两阶段点云目标检测&#xff1a;理论与实践 在这篇博客中&#xff0c;我们将探索两阶段点云目标检测的理论基础和实际应用…

cancal 同步mysql数据到es中

1.环境&#xff1a; windocs service2012 、 jdk版本1.8 、canal版本1.5、mysql版本5.7、 注意&#xff1a;canal版本1.5需要的jdk是1.8 如果你下载的是canal1.6&#xff0c;jdk是1.8&#xff0c;那样会报错。 下载地址 Releases alibaba/canal GitHub 下载并上传到服…

创建数据库Market、Team,按要求完成指定操作

创建数据库Market&#xff0c;在Market中创建数据表customers&#xff0c;customers表结构如表4.6所示&#xff0c;按要求进行操作。 代码如下&#xff1a; #(1&#xff09;创建数据库Market mysql> create database Market; Query OK, 1 row affected (0.00 sec)mysql>…

Java阶段五Day02

Java阶段五Day02 文章目录 Java阶段五Day02MAVEN-聚合(多模块3)回顾多模块2个特性依赖:继承: 聚合场景聚合目的实现聚合聚合总结 远程仓库远程仓库概念配置settings.xml远程库配置注意事项 GIT详细学习git概括git历史本地版本控制相关命令git分支管理分支管理基本概念分支管理相…

Failed to initialize NVML: Driver/library version mismatch

nvidia驱动安装之后&#xff0c;nvidia-smi 报错 Driver/library version mismatch 不重启系统的解决方法 查看系统日志&#xff0c;确定具体报错信息&#xff1a; # dmesg | tail [8598493.408944] NVRM: API mismatch: the client has the version 525.125.06, butNVRM: t…

STL好难(4):list的使用

和列表很像 1.list的介绍 点击这里查看 list 的官方文档 list类似数据结构中的链表 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。2. list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独…

flutter聊天界面-自定义表情键盘实现

flutter聊天界面-自定义表情键盘实现 flutter 是 Google推出并开源的移动应用开发框架&#xff0c;主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App&#xff0c;一套代码同时运行在 iOS 和 Android平台。 flutter开发基础腾讯IM的聊天应用&#xff0c;使用的是t…

css设计表格圆角最简单的方法

代码如下&#xff1a; table {width: 100%;/* border-collapse: collapse; */background-color: #FBFBFB; /* 背景颜色; */border-collapse: separate; /* 让border-radius有效 */border-spacing: 0; /*表格中每个格边距设为0*/border: 1px solid #DFDFDF;/*边框*/border-radi…