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

news/2024/7/5 5:22:03 

<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://lihuaxi.xjx100.cn/news/1602564.html

相关文章

30岁还可以转行网络安全吗？会不会有中年危机？

30岁还可以转行网络安全吗？会不会有中年危机？

可以&#xff0c;网络安全行业的包容性很强&#xff0c;只要你有技术&#xff0c;那么就能够从事相关的工作&#xff0c;并且薪资比很多其他行业高很多。而且网络安全行业没有他们说的年龄危机&#xff0c;反而是越来越值钱、薪资越高。 这是网友分享的对于网络安全行业的看法&…
阅读更多...
解决: 使用html2canvas和print-js打印组件时, 超出高度出现空白页

解决: 使用html2canvas和print-js打印组件时, 超出高度出现空白页

如果所示&#xff1a;当我利用html2canvas转换成图片后, 然后使用print-js打印多张图片, 第一张会出现空白页 打印组件可参考这个: Vue-使用html2canvas和print-js打印组件 解决: 因为是使用html2canvas转换成图片后才打印的, 而图片是行内块级元素, 会有间隙, 所以被挤下去了…
阅读更多...
模拟器运行在AndroidStudio内部，设置其独立窗口显示

模拟器运行在AndroidStudio内部，设置其独立窗口显示

在窗口内部运行 设置成独立窗口 Android Studio->Settings或Preferences->Tools->Emulator->取消勾选Launch in the Running Devices tool window --->点击右下角的OK按钮 ---> 重启Android Studio 再次启动模拟器
阅读更多...
项目环境搭建

项目环境搭建

注册中心网关配置 spring:cloud:gateway:globalcors:add-to-simple-url-handler-mapping: truecorsConfigurations:[/**]:allowedHeaders: "*"allowedOrigins: "*"allowedMethods:- GET- POST- DELETE- PUT- OPTIONroutes:# 平台管理- id: useruri: lb://…
阅读更多...
电脑有录屏功能吗？让我来揭开谜底！

电脑有录屏功能吗？让我来揭开谜底！

“电脑有录屏功能吗&#xff1f;今天孩子上网课的时候&#xff0c;老师叫录屏一些重要的知识点&#xff0c;但是他不会操作&#xff0c;就跑来问我&#xff0c;我也不是很清楚电脑怎么录屏&#xff0c;就想问问大家知道吗&#xff1f;” 电脑在我们的日常生活和工作中扮演着重…
阅读更多...
打印字节流和字符流

打印字节流和字符流

打印字节流和字符流 printStream/ printWriter的构造器和方法都是一样的 package printfile;import java.io.FileOutputStream; import java.io.OutputStream; import java.io.PrintStream; import java.io.PrintWriter; import java.nio.charset.Charset;public class Prin…
阅读更多...
在LangChain中使用Milvus + openai使用

在LangChain中使用Milvus + openai使用

Milvus(opens in a new tab) 是一个存储、索引和管理由深度神经网络和其他机器学习&#xff08;ML)模型生成的大规模嵌入向量的数据库。 1.文档分割 from langchain.document_loaders import PyPDFLoader pdfloader PyPDFLoader("D:\py\LangChaindao\操作系统原理.pdf&…
阅读更多...
[HNOI2003]激光炸弹---二维前缀和

[HNOI2003]激光炸弹---二维前缀和

题目描述 一种新型的激光炸弹&#xff0c;可以摧毁一个边长为 m 的正方形内的所有目标。现在地图上有 n 个目标&#xff0c;用整数 xi​ , yi​ 表示目标在地图上的位置&#xff0c;每个目标都有一个价值 vi​ .激光炸弹的投放是通过卫星定位的&#xff0c;但其有一个缺点&…
阅读更多...
最新文章

Copyright @ 2022~2023