el-tree中插入图标并且带提示信息

<template><div class="left"><!-- default-expanded-keys 默认展开 --><!-- expand-on-click-node 只有点击箭头才会展开树 --><el-tree :data="list" :props="defaultProps" @node-click="handleNodeClick" :default-expanded-keys="[1]" :expand-on-click-node='false' node-key='menuId'><span class="custom-tree-node box" slot-scope="{ node, data }"><span style="flex:1">{{ node.label }}</span><!-- 此处判断，是否展示图标 --><span style="padding-right:10px" v-if="data.menuId === 6"><el-tooltip class="item" effect="dark" content="提示文字" placement="top-start"><img src="../assets/icon-time.png" style="width: 20px;"></el-tooltip></span></span></el-tree></div>
</template><script>
export default {data () {return {defaultProps: {children: 'children',label: 'menuName'},// 数据源list: [{"menuId": 1,"menuName": "首页(首页)","menuCode": "首页","parentId": 0,"orderNum": 0,"path": "/page","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 0,"visible": 1,"perms": null,"icon": "iconfont icon-shouye","status": 1,"remark": null,"roleId": null,"selected": true,"level": 1,"children": [{"menuId": 2,"menuName": "首页(首页)","menuCode": "首页","parentId": 1,"orderNum": 1,"path": "/welcome","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 1,"visible": 1,"perms": null,"icon": "","status": 1,"remark": null,"roleId": null,"selected": true,"level": 2,"children": null}]},{"menuId": 3,"menuName": "随访数据查询(随访数据查询)","menuCode": "随访数据查询","parentId": 0,"orderNum": 1,"path": "/followUpDataQuery","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 0,"visible": 1,"perms": null,"icon": "iconfont icon-shengwuxuejiance","status": 1,"remark": null,"roleId": null,"selected": true,"level": 1,"children": [{"menuId": 4,"menuName": "随访数据查询(随访数据查询)","menuCode": "随访数据查询","parentId": 3,"orderNum": 1,"path": "index","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 1,"visible": 1,"perms": null,"icon": "","status": 1,"remark": null,"roleId": null,"selected": true,"level": 2,"children": null},{"menuId": 5,"menuName": "随访详情(随访详情)","menuCode": "随访详情","parentId": 3,"orderNum": 2,"path": "detail","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 1,"visible": 1,"perms": null,"icon": "","status": 1,"remark": null,"roleId": null,"selected": true,"level": 2,"children": null}]},{"menuId": 21,"menuName": "此单名称(11)","menuCode": "11","parentId": 0,"orderNum": 1,"path": "请问请问饿```","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 0,"visible": 1,"perms": null,"icon": "321","status": 1,"remark": null,"roleId": null,"selected": true,"level": 1,"children": null},{"menuId": 6,"menuName": "调查数据查询(调查数据查询)","menuCode": "调查数据查询","parentId": 0,"orderNum": 2,"path": "/surveyDataQuery","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 0,"visible": 1,"perms": null,"icon": "iconfont icon-shaichaxinxichaxun","status": 1,"remark": null,"roleId": null,"selected": true,"level": 1,"children": [{"menuId": 7,"menuName": "调查数据查询(调查数据查询)","menuCode": "调查数据查询","parentId": 6,"orderNum": 1,"path": "index","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 1,"visible": 1,"perms": null,"icon": "","status": 1,"remark": null,"roleId": null,"selected": true,"level": 2,"children": null},{"menuId": 8,"menuName": "新建问卷(新建问卷)","menuCode": "新建问卷","parentId": 6,"orderNum": 2,"path": "evaluationreport","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 1,"visible": 1,"perms": null,"icon": "","status": 1,"remark": null,"roleId": null,"selected": true,"level": 2,"children": null},{"menuId": 9,"menuName": "随访详情(随访详情)","menuCode": "随访详情","parentId": 6,"orderNum": 3,"path": "evaluationlook","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 1,"visible": 1,"perms": null,"icon": "","status": 1,"remark": null,"roleId": null,"selected": true,"level": 2,"children": null}]},{"menuId": 10,"menuName": "任务配置(任务配置)","menuCode": "任务配置","parentId": 0,"orderNum": 3,"path": "/taskSet","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 0,"visible": 1,"perms": null,"icon": "iconfont icon-renwuguanli","status": 1,"remark": null,"roleId": null,"selected": true,"level": 1,"children": [{"menuId": 11,"menuName": "任务配置(任务配置)","menuCode": "任务配置","parentId": 10,"orderNum": 1,"path": "index","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 1,"visible": 1,"perms": null,"icon": "","status": 1,"remark": null,"roleId": null,"selected": true,"level": 2,"children": null}]},{"menuId": 12,"menuName": "数据统计(数据统计)","menuCode": "数据统计","parentId": 0,"orderNum": 4,"path": "/dataStatistics","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 0,"visible": 1,"perms": null,"icon": "iconfont icon-shujutongji","status": 1,"remark": null,"roleId": null,"selected": true,"level": 1,"children": [{"menuId": 13,"menuName": "数据统计(数据统计)","menuCode": "数据统计","parentId": 12,"orderNum": 1,"path": "index","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 1,"visible": 1,"perms": null,"icon": "","status": 1,"remark": null,"roleId": null,"selected": true,"level": 2,"children": null}]},{"menuId": 14,"menuName": "数据导出(数据导出)","menuCode": "数据导出","parentId": 0,"orderNum": 5,"path": "/dataExport","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 0,"visible": 1,"perms": null,"icon": "iconfont icon-suifangrenwuguanli","status": 1,"remark": null,"roleId": null,"selected": true,"level": 1,"children": [{"menuId": 15,"menuName": "数据导出(数据导出)","menuCode": "数据导出","parentId": 14,"orderNum": 1,"path": "index","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 1,"visible": 1,"perms": null,"icon": "","status": 1,"remark": null,"roleId": null,"selected": true,"level": 2,"children": null}]},{"menuId": 16,"menuName": "系统管理(系统管理)","menuCode": "系统管理","parentId": 0,"orderNum": 6,"path": "/systemManage","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 0,"visible": 1,"perms": null,"icon": "iconfont icon-xitongguanli","status": 1,"remark": null,"roleId": null,"selected": true,"level": 1,"children": [{"menuId": 17,"menuName": "用户管理(用户管理)","menuCode": "用户管理","parentId": 16,"orderNum": 1,"path": "usersManage","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 1,"visible": 1,"perms": null,"icon": "","status": 1,"remark": null,"roleId": null,"selected": true,"level": 2,"children": null},{"menuId": 18,"menuName": "角色管理(角色管理)","menuCode": "角色管理","parentId": 16,"orderNum": 2,"path": "roleManage","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 1,"visible": 1,"perms": null,"icon": "","status": 1,"remark": null,"roleId": null,"selected": true,"level": 2,"children": null},{"menuId": 19,"menuName": "权限配置(权限配置)","menuCode": "权限配置","parentId": 16,"orderNum": 3,"path": "permissionSetting","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 1,"visible": 1,"perms": null,"icon": "","status": 1,"remark": null,"roleId": null,"selected": true,"level": 2,"children": null},{"menuId": 20,"menuName": "菜单管理(菜单管理)","menuCode": "菜单管理","parentId": 16,"orderNum": 4,"path": "menuManage","component": null,"query": null,"isFrame": 0,"isCache": 0,"menuType": 1,"visible": 1,"perms": null,"icon": "","status": 1,"remark": null,"roleId": null,"selected": true,"level": 2,"children": null}]}],defaultExpandedKeys: []}},methods: {// 点击树handleNodeClick (val) {console.log(val);}}
}
</script><style lang="less" scoped>
.left {width: 360px;margin: 20px;
}
.box {display: flex;flex: 1;
}
</style>

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

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

相关文章

SLAM面试笔记(8) — 计算机视觉面试题

SLAM面试笔记(8) — 计算机视觉面试题

目录 问题1&#xff1a;目标检测的算法分类 问题2&#xff1a;卷积神经网络的组成 问题3&#xff1a;输入层的作用 问题4&#xff1a;卷积层作用 问题5&#xff1a;卷积核类型 问题6&#xff1a;11卷积核作用 问题7&#xff1a;卷积核是否越大越好 问题8&#xff1a;棋…
阅读更多...
ubuntu安装Miniconda并举例使用

ubuntu安装Miniconda并举例使用

更新系统包 sudo apt update sudo apt upgrade官网下载Miniconda&#xff0c;最好是实体机下载后放进虚拟机&#xff0c;方法可以参考Xftp 7连接服务器或者本地虚拟机文章 https://docs.conda.io/en/latest/miniconda.html#linux-installers 进入安装目录执行&#xff0c;右键…
阅读更多...
Centos7使用nginx搭建rtmp流媒体服务器

Centos7使用nginx搭建rtmp流媒体服务器

为什么写这篇文章 2023年10月份&#xff0c;公司系统中有个需求&#xff0c;需要使用摄像头记录工程师在维修设备时的工作状态&#xff0c;找到了一家做执法记录仪的厂商&#xff0c;通过厂商发过来的文档了解到该执法记录仪支持通过rtmp协议推流至服务器&#xff0c;第一次接…
阅读更多...
华为认证 | 这门HCIA认证正式发布！

华为认证 | 这门HCIA认证正式发布！

华为认证云计算工程师HCIA-Cloud Computing V5.5&#xff08;中文版&#xff09;自2023年9月28日起&#xff0c;正式在中国区发布。 01 发布概述 基于“平台生态”战略&#xff0c;围绕“云-管-端”协同的新ICT技术架构&#xff0c;华为公司打造了覆盖ICT领域的认证体系&#…
阅读更多...
Sentinel Dashboard 接入 Nacos 动态数据源 Zuul 接入 Sentinel 实战

Sentinel Dashboard 接入 Nacos 动态数据源 Zuul 接入 Sentinel 实战

背景 Sentinel Dashboard 默认将限流、熔断等规则保存在内存中&#xff0c;然后同步给连接 Dashboard 的客户端&#xff0c;客户端也是保存在内存中。 那么如果当 Sentinel Dashboard 异常重启&#xff0c;那么之前配置的规则将全部丢失&#xff0c;需要重新进行配置。 其中&a…
阅读更多...
简单使用 Hugo 博客

简单使用 Hugo 博客

之前用过 hugo&#xff0c;本次来分享一波&#xff0c;确实简单好用&#xff0c;可以持续使用&#xff0c;尤其是喜欢 GO语言的同学 hugo Hugo是一个用 Go语言 编写的静态网站生成器&#xff0c;可以快速地生成高效、安全和易于管理的静态网站。Hugo具有速度快、可定制性强、…
阅读更多...
北邮22级信通院数电：Verilog-FPGA（4）第三周实验：按键消抖、呼吸灯、流水灯 操作流程注意事项

北邮22级信通院数电：Verilog-FPGA（4）第三周实验：按键消抖、呼吸灯、流水灯 操作流程注意事项

北邮22信通一枚~ 跟随课程进度更新北邮信通院数字系统设计的笔记、代码和文章 持续关注作者 迎接数电实验学习~ 获取更多文章&#xff0c;请访问专栏&#xff1a; 北邮22级信通院数电实验_青山如墨雨如画的博客-CSDN博客 目录 一.注意事项 二.按键消抖 2.1 LED_deboun…
阅读更多...
[MySQL]基础篇

[MySQL]基础篇

文章目录 1. MySQL基本使用1.1 MySQL的启动和登录1.1.1 MySQL的启动1.1.2 MySQL的客户端连接 1.2 数据模型 2. SQL2.1 SQL类型2.1.1 数值类型2.1.2 字符串类型2.1.3 日期类型 2.2 DDL2.2.1 数据库操作2.2.2 表操作 - 查询2.2.3 表操作 - 创建表2.2.4 表操作 - 修改 2.3 DML2.3.…
阅读更多...
运维小工具分享

运维小工具分享

1.windwos时间同步工具 通过NetTime软件同步 通过一个免费的同步时间软件来进行对时操作 软件官网链接&#xff1a;http://timesynctool.com/ 修改Windows主机时间&#xff0c;修改时间&#xff0c;时间差为10年、3年、4月份、24小时、2小时、1分钟&#xff1b;都可以及时与“…
阅读更多...
ROS学习笔记(六)---服务通信机制

ROS学习笔记(六)---服务通信机制

1. 服务通信是什么 在ROS中&#xff0c;服务通信机制是一种点对点的通信方式&#xff0c;用于节点之间的请求和响应。它允许一个节点&#xff08;服务请求方&#xff09;向另一个节点&#xff08;服务提供方&#xff09;发送请求&#xff0c;并等待响应。 服务通信机制在ROS中…
阅读更多...
深度学习batch、batch_size、epoch、iteration以及小样本中episode、support set、query set关系

深度学习batch、batch_size、epoch、iteration以及小样本中episode、support set、query set关系

batch、batch_size、epoch、iteration关系&#xff1a; epoch&#xff1a;整个数据集 batch&#xff1a; 整个数据集分成多少小块进行训练 batch_size&#xff1a; 一次训练&#xff08;1 batch&#xff09;需要 batch_size个样本 iteration&#xff1a; 整个数据集需要用b…
阅读更多...
VMware虚拟机安装Linux教程（图文超详细）

VMware虚拟机安装Linux教程（图文超详细）

1.安装VMware 官方正版VMware下载地址 https://www.vmware.com/ 双击安装 以上就是VMware在安装时的每一步操作&#xff0c;基本上就是点击 "下一步" 一直进行安装。 2.安装Linux VMware虚拟机安装完毕之后&#xff0c;我们就可以打开VMware&#xff0c;并在上面来…
阅读更多...
【群智能算法改进】一种改进的光学显微镜算法 IOMA算法[1]【Matlab代码#60】

【群智能算法改进】一种改进的光学显微镜算法 IOMA算法[1]【Matlab代码#60】

文章目录 【获取资源请见文章第5节&#xff1a;资源获取】1. 光学显微镜算法&#xff08;OMA&#xff09;1.1 物镜放大倍数1.2 目镜放大倍数 2. 改进后的IOMA算法2.1 透镜成像折射方向学习 3. 部分代码展示4. 仿真结果展示5. 资源获取说明 【获取资源请见文章第5节&#xff1a;…
阅读更多...
Vuex的基础使用存值及异步

Vuex的基础使用存值及异步

目录 一、概述 ( 1 ) 讲述 ( 2 ) 概念 ( 3 ) 作用 二、取值 1. 安装 2. 菜单栏 3. 模块 4. 引用 三、改值 四、异步&后台请求 带来的获取 一、概述 ( 1 ) 讲述 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的…
阅读更多...
JVM第一讲：JVM相关知识体系详解+面试(P6熟练 P7精通)

JVM第一讲：JVM相关知识体系详解+面试(P6熟练 P7精通)

JVM相关知识体系详解面试(P6熟练 P7精通) 面试时常常被面试官问到JVM相关的问题。本系列将给大家构建JVM核心知识点全局知识体系&#xff0c;本文是JVM第一讲&#xff0c;JVM相关知识体系详解和相关面试题梳理。 文章目录 JVM相关知识体系详解面试(P6熟练 P7精通)1、JVM学习建议…
阅读更多...
大数据之Hudi数据湖_执行编译hudi命令和jar包位置_hudi和hive集成_和spark集成_和presto集成_和flink集成_和trino集成---大数据之Hudi数据湖工作笔记0004

大数据之Hudi数据湖_执行编译hudi命令和jar包位置_hudi和hive集成_和spark集成_和presto集成_和flink集成_和trino集成---大数据之Hudi数据湖工作笔记0004

在hudi源码的根目录执行就可以了,注意要指定spark的版本上面指定的是3.2 如果不指定默认是3,最好都指定一下. 这里在执行编译之前,我们可以先去看一下在hudi的源码目录下,有个README.md 这个文件 去看看她支持的java 版本和git maven版本 看看spark支持的版本 看看对应的scala…
阅读更多...
PayPal VS Block：开启全球金融科技的新未来

PayPal VS Block：开启全球金融科技的新未来

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 总结&#xff1a; &#xff08;1&#xff09;PayPal&#xff08;PYPL&#xff09;的战略重点是专注于 branded checkout、先付后买、人工智能驱动的创新&#xff0c;以及进入稳定币市场。 &#xff08;2&#xff09;Block&a…
阅读更多...
指针拔尖（2）（巩固提高，全网最牛，包会，看不懂带电脑来找我）

指针拔尖（2）（巩固提高，全网最牛，包会，看不懂带电脑来找我）

文章目录 前言变量的声明 一、函数指针二、函数指针数组三、指向函数指针数组的指针四、 回调函数总结 前言 提示&#xff1a;本章是指针拔尖系列的终章&#xff0c;有四大知识点。 一、函数指针 二、函数指针数组 三、指向函数指针数组的指针 四、回调函数 但学习这些知识点我…
阅读更多...
目标检测新思路：DETR

目标检测新思路：DETR

Transformer是一种基于自注意力机制的神经网络架构&#xff0c;它能够从序列中提取重要信息&#xff0c;已被广泛应用于自然语言处理和语音识别等领域。随着Transformer的提出和发展&#xff0c;目标检测领域也开始使用Transformer来提高性能。 DETR是第一篇将Transformer应用于…
阅读更多...
Cocos Creator3.8 项目实战（八）2D UI DrawCall优化详解（上）

Cocos Creator3.8 项目实战（八）2D UI DrawCall优化详解（上）

游戏开发的朋友都知道&#xff0c;在游戏开发过程中&#xff0c;DrawCall 是我们优化性能的一个非常重要的指标&#xff0c;直接影响游戏的整体性能表现&#xff0c;DrawCall数量越多&#xff0c;帧率会降低&#xff0c;能明显感觉到卡顿。 那今天我们就来聊一聊&#xff0c;2D…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发