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.mzph.cn/news/97769.shtml

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

相关文章

c语言进阶部分详解(详细解析字符串常用函数,并进行模拟实现(下))

上篇文章介绍了一些常用的字符串函数&#xff0c;大家可以跳转过去浏览一下&#xff1a;c语言进阶部分详解&#xff08;详细解析字符串常用函数&#xff0c;并进行模拟实现&#xff08;上&#xff09;&#xff09;_总之就是非常唔姆的博客-CSDN博客 今天接着来介绍一些&#x…

Linux防火墙之--SNAT和DNAT

1.SNAT是什么 SNAT又称源地址转换。源地址转换是内网地址向外访问时&#xff0c;发起访问的内网ip地址转换为指定的ip地址&#xff08;可指定具体的服务以及相应的端口或端口范围&#xff09;&#xff0c;这可以使内网中使用保留ip地址的主机访问外部网络&#xff0c;即内网的多…

腾讯云轻量和CVM有啥区别?怎么选择服务器配置?

腾讯云轻量服务器和云服务器有什么区别&#xff1f;为什么轻量应用服务器价格便宜&#xff1f;是因为轻量服务器CPU内存性能比云服务器CVM性能差吗&#xff1f;轻量应用服务器适合中小企业或个人开发者搭建企业官网、博客论坛、微信小程序或开发测试环境&#xff0c;云服务器CV…

TDengine OSS 与 qStudio 实现无缝协同,革新数据分析和管理方式

在数字化转型如火如荼的当下&#xff0c;海量爆发的时序数据处理成为转型成功的关键因素之一。为了帮助社区用户更好地进行数据分析和管理&#xff0c;丰富可视化解决方案的多样性&#xff0c;我们将开源的时序数据库&#xff08;Time Series Database&#xff09; TDengine OS…

一文看懂光模块的工作原理

你们好&#xff0c;我的网工朋友 光模块有很多类别&#xff0c;是我们经常要用到的PHY层器件。虽然封装&#xff0c;速率&#xff0c;传输距离有所不同&#xff0c;但是其内部组成基本是一致的。 以太网交换机常用的光模块有SFP&#xff0c;GBIC&#xff0c;XFP&#xff0c;X…

运行软件找不到mfc140u.dll怎么解决,mfc140u.dll是什么文件

"找不到 mfc140u.dll"是一条错误信息&#xff0c;表示您的计算机上缺少一个名为 mfc140u.dll 的动态链接库&#xff08;DLL&#xff09;文件。这个文件通常与 Microsoft Visual C Redistributable 相关。Mfc140u.dll 是 Microsoft 基础类库&#xff08;MFC&#xff0…

GD32F103x 定时器

1. 定时器的基本介绍 STM32的定时器主要分为三种&#xff1a;高级定时器、通用定时器、基本定时器。 即&#xff1a;高级定时器具有捕获/比较通道和互补输出&#xff0c;死区时间&#xff0c;通用定时器只有捕获/比较通道&#xff0c;基本定时器没有以上两者。 1. 基本定时…

【深度学习】UNIT-DDPM核心讲解

文章目录 大致介绍&#xff1a;扩散损失&#xff1a;转换损失&#xff1a;循环一致性损失&#xff1a;推理过程&#xff1a;优缺点&#xff1a; 参考文章&#xff1a; https://blog.csdn.net/ssshyeong/article/details/127210086 这篇文章对整个文章 UNIT-DDPM: UNpaired Imag…

Python为Excel中每一个单元格计算其在多个文件中的平均值

本文介绍基于Python语言&#xff0c;对大量不同的Excel文件加以跨文件、逐单元格平均值计算的方法。 首先&#xff0c;我们来明确一下本文的具体需求。现有一个文件夹&#xff0c;其中有如下所示的大量Excel文件&#xff0c;我们这里就以.csv文件为例来介绍。其中&#xff0c;每…

网工内推 | IT高级运维工程师,周末双休,包吃包住,14-20k

01 深圳朗特智能控制股份有限公司 招聘岗位&#xff1a;IT高级运维工程师 职责描述&#xff1a; 1、对集团网络基础架构的建设、运维、安全制定相关标准和准则&#xff1b; 2、负责集团数据中心、核心设备、信息安全的管理和运维&#xff1b; 3、执行网络、服务器、核心交换机…

21.6 CSS 弹性布局

1. 弹性盒子 CSS弹性盒子(Flexbox)是一种布局模型, 用于创建灵活的, 自适应的网页布局. 它的目的是在不同屏幕尺寸和设备上实现一致的布局效果.引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列, 对齐和分配空白空间.弹性容器通过设置display…

深入理解强化学习——强化学习的基础知识

分类目录&#xff1a;《深入理解强化学习》总目录 在机器学习领域&#xff0c;有一类任务和人的选择很相似&#xff0c;即序贯决策&#xff08;Sequential Decision Making&#xff09;任务。决策和预测任务不同&#xff0c;决策往往会带来“后果”&#xff0c;因此决策者需要为…

华硕平板k013me176cx线刷方法

1.下载adb刷机工具, 或者刷机精灵 2.下载刷机rom包 华硕asus k013 me176cx rom固件刷机包-CSDN博客 3.平板进入刷机界面 进入方法参考&#xff1a; ASUS (k013) ME176CX不进入系统恢复出厂设置的方法-CSDN博客 4.解压ME176C-CN-3_2_23_182.zip&#xff0c;把UL-K013-CN-3.2.…

竞赛选题 机器学习股票大数据量化分析与预测系统 - python 竞赛选题

文章目录 0 前言1 课题背景2 实现效果UI界面设计web预测界面RSRS选股界面 3 软件架构4 工具介绍Flask框架MySQL数据库LSTM 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 机器学习股票大数据量化分析与预测系统 该项目较为新颖&am…

动态内存管理函数(malloc,calloc,realloc,free)

动态内存函数 1.1malloc和free C语言提供了一个动态内存开辟的函数&#xff1a; void* malloc (size_t size); 这个函数向内存申请一块连续可用的空间&#xff0c;并返回指向这块空间的指针。 如果开辟成功&#xff0c;则返回一个指向开辟好空间的指针。如果开辟失败&#…

开源大模型正在“杀死”闭源?

点击关注 文丨郝 鑫&#xff0c;编丨刘雨琦 “OpenAI不足为惧&#xff0c;开源会慢慢赶上来。” 彼时Hugging Face创始人Clem Delangue的一句预言&#xff0c;正在迅速成为现实。 ChatGPT横空出世7个多月后&#xff0c;7月19日&#xff0c;Llama 2宣布开源&#xff0c;并且可…

day25--JS进阶(递归函数,深浅拷贝,异常处理,改变this指向,防抖及节流)

目录 浅拷贝 1.拷贝对象①Object.assgin() ②展开运算符newObj {...obj}拷贝对象 2.拷贝数组 ①Array.prototype.concat() ② newArr [...arr] 深拷贝 1.通过递归实现深拷贝 2.lodash/cloneDeep实现 3.通过JSON.stringify()实现 异常处理 throw抛异常 try/catch捕获…

Linux读写锁的容易犯的问题

Linux读写锁的容易犯的问题 读写锁是互斥锁之外的另一种用于多线程之间同步的一种方式。 多线程对于一个共享变量的读操作是安全的&#xff0c; 而写操作是不安全的。如果在一个读很多而写很少的场景之下&#xff0c;那么使用互斥锁将会阻碍大量的线程安全的读操作的进行。在…

地震勘探——相关概念(一)

地震波的基本介绍 波前&#xff1a;波在同一时刻所到达的点所构成的面&#xff0c;这个面上构成的相位是相同的。波前的形状取决于传播介质的物理性质。我们可以用地震波动方程模拟波前变化&#xff08;波场快照&#xff09;。 射线&#xff08;Ray&#xff09;&#xff1a;是…

Unity Golang教程-Shader编写一个流动的云效果

创建目录 一个友好的项目&#xff0c;项目目录结构是很重要的。我们先导入一个登录界面模型资源。 我们先创建Art表示是美术类的资源&#xff0c;资源是模型创建Model文件夹&#xff0c;由于是在登录界面所以创建Login文件夹&#xff0c;下面依次是模型对应的资源&#xff0c…