elementui-树形控件实现子节点右侧添加图标和数据,鼠标放上去显示文字

1、代码

 <el-treev-loading="nameLoding":data="data"node-key="id":highlight-current="true"empty-text="暂无数据":props="defaultPropsIndex"default-expand-all:filter-node-method="filterNodeIndex"ref="treeName"@node-click="getCheckedNodes"><spanclass="custom-tree-node"slot-scope="{ node, data }"><span>{{ node.label }}</span><span v-if="node.level > 1"><spanstyle="text-align: left;width: 63px;display: inline-block;"><el-tooltipclass="item"effect="dark"content="拥有的指标权限个数"placement="top"><ititle=""class="el-icon-s-marketing"style="color: rgb(103, 194, 58)"></i> </el-tooltip><span style="margin-right: 10%">{{data.num}}</span></span><spanstyle="text-align: left;width: 71px;display: inline-block;"><el-tooltipclass="item"effect="dark"content="拥有的访问权限个数"placement="top"><iclass="el-icon-success"style="color: rgb(103, 194, 58)"></i> </el-tooltip><span style="margin-right: 10%">{{data.sub_num}}</span></span></span></span></el-tree>

css

.custom-tree-node {flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;/* padding-right: 8px; *//* padding-right: 15%; */
}

效果图:

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

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

相关文章

LeetCode 226. 翻转二叉树

226. 翻转二叉树 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1]示例 2&#xff1a; 输入&#xff1a;root [2,1,3] 输出&#xff1a;[2,…

redis 从0到1完整学习 (十八):阻塞/非阻塞 IO

文章目录 1. 引言2. redis 源码下载3. I/O 模型3.1 阻塞 I/O3.2 非阻塞 I/O 4. 参考 1. 引言 前情提要&#xff1a; 《redis 从0到1完整学习 &#xff08;一&#xff09;&#xff1a;安装&初识 redis》 《redis 从0到1完整学习 &#xff08;二&#xff09;&#xff1a;red…

jetlinks 规则编排中的函数节点使用 js 脚本格式化输出当前系统时间的坑

网上搜到的都是类似如下这种&#xff1a; // 获取当前时间 var date new Date();// 格式化输出当前时间 var year date.getFullYear(); var month date.getMonth(); var day date.getDate(); var hour date.getHours(); var minute date.getMinutes(); var second date.…

捷为科技亮相2024深圳PMO年度论坛 探讨项目管理赋能企业数字化转型

1月13日&#xff0c;一场聚焦项目管理创新与数字化转型的盛会——2024年深圳PMO年度论坛在深圳新一代产业园隆重举行。本次论坛以“项目管理赋能企业数字化转型”为主题&#xff0c;汇聚了众多行业专家、学者和企业代表&#xff0c;共同探讨如何通过项目管理推动企业数字化转型…

电商概念之商品模型

1、基本定义 广义定义&#xff1a;商品是为了出售而生产的劳动成果&#xff0c;人类社会生产力发展到一定历史阶段的产物&#xff0c;用于交换的劳动产品。 电商商品基本概念&#xff1a; 商品类目商品属性销售属性商品编码&商品规格编码SKU和SPU… 2、商品类目 电商平…

【动态规划】20子数组系列_环形子数组的最大和_C++(medium)

题目链接&#xff1a;leetcode环形子数组的最大和 目录 题目解析&#xff1a; 算法原理 1.状态表示 2.状态转移方程 3.初始化 4.填表顺序 5.返回值 编写代码 题目解析&#xff1a; 题目让我们求返回 nums 的非空 子数组 的最大可能和 这道题如果是按照-这道题-是不对…

华为MindStudio简介

MindStudio是华为推出的一款集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要用于边缘计算和人工智能应用的开发。它为开发者提供了一系列工具&#xff0c;用于设计、开发、调试和部署在华为Ascend系列AI处理器上运行的应用程序。MindStudio旨在简化和加速AI应用开发的…

基于信号完整性的一些PCB设计建议

最小化单根信号线质量的一些PCB设计建议 1. 使用受控阻抗线&#xff1b; 2. 理想情况下&#xff0c;所有信号都应该使用完整的电源或地平面作为其返回路径&#xff0c;关键信号则使用地平面作为返回路径&#xff1b; 3. 信号的返回参考面发生变化时&#xff0c;在尽可能接近…

JMeter笔记(三)

个人学习笔记&#xff08;整理不易&#xff0c;有帮助点个赞&#xff09; 笔记目录&#xff1a;学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 目录 一&#xff1a;参数化方法 1&#xff09;用户定义的变量 2&#xff09;函数助手 3&#xff09;…

MYSQL的事务隔离

本章概览 mysql是一个支持多引擎的系统&#xff0c;并不是所有引擎都支持事务&#xff0c;本篇以innodb为例解析mysql在事务支持的实现。提到事务一定会想到ACID(Atomicity、Consistency、Isolation、Durability&#xff0c;即原子性、一致性、隔离性、持久性)&#xff0c;今天…

(二)如何在两台运行Ubuntu 20.04的系统上建立RabbitMQ集群

如何在两台运行Ubuntu 20.04的系统上建立RabbitMQ集群。建立RabbitMQ集群需要一些特定的步骤&#xff0c;下面是一个概述&#xff1a; 安装RabbitMQ和Erlang&#xff1a;首先&#xff0c;在两台服务器上都执行您提供的快速安装脚本以安装RabbitMQ和Erlang。 详见《(一)Ubuntu 2…

旧路由重置新路由设置新路由设置教程|适用于PPPoE拨号

前言 前几天朋友说路由器想要重置&#xff0c;但不知道怎么弄。所以就想着只帮忙重置路由器的话&#xff0c;只能帮到一个人。但把整个过程写成图文&#xff0c;就可以帮助更多人。 本文章适合电脑小白&#xff0c;请注意每一步哦&#xff01; 注意事项 开始之前需要确认光猫…

Redux的使用方法,目前借助的是reduxjs/toolkit redux工具

1 第一步 安装redux的插件&#xff1a; npm i reduxjs/toolkit react-redux 2 第二步 创建store文件夹下创建index.ts文件 import {configureStore} from reduxjs/toolkit const store configureStore({ // 创建store实例对象reducer:{} })export default store // 对外暴露…

pod控制器的作用

pod控制器的作用 1、动态pv和pvc deployment是控制器 pod空气器:工作负载&#xff0c;workload用于管理pod的中间层&#xff0c;确保podi资源符合预期的状态 预期状态 1、副本数 2、容器重启策略 3、镜像拉取策略 pod、出现故障时重启等等 pod的控制器类型 1、replic…

QT-文件夹与文件操作/QDir/QFile

本文目录 判断文件夹是否存在创建文件夹删除文件夹创建文件删除文件 判断文件夹是否存在 下面的代码判断E盘下ABC文件夹是否存在&#xff0c;注意斜杠&#xff0c;不要写反了 #include <QDir>int main(int argc, char *argv[]) {QDir dir("E:/ABC");if(!dir.…

删除运行框中的文件打开历史记录

当我们使用everything、百度、迅雷等软件&#xff0c;在列表中右键选中打开文件夹时。 当使用 winR 快捷键等方式打开运行时&#xff0c;输入盘符会出现之前打开过的文件夹&#xff0c; 一方面展示的特别多会比较混乱&#xff0c;另一方面 记得在之前的window版本中&#xff08…

WIFI7时代正式来临

Wi-Fi联盟在2024年1月8日宣布推出了Wi-Fi CERTIFIED 7认证&#xff0c;标志着WIFI7时代的正式来临&#xff01;这一认证引入了一系列强大的新功能&#xff0c;旨在提升Wi-Fi性能并改善各种连接环境。WIFI7支持多用户AR/VR/XR、沉浸式3D培训、电子游戏、混合工作、工业物联网和汽…

架构师之超时未支付的订单进行取消操作的几种解决方案

今天给大家上一盘硬菜&#xff0c;并且是支付中非常重要的一个技术解决方案&#xff0c;有这块业务的同学注意自己尝试一把哈&#xff01; 一、需求如下&#xff1a; 生成订单30分钟未支付&#xff0c;自动取消 生成订单60秒后,给用户发短信 对上述的需求&#xff0c;我们给…

【算法与数据结构】63、LeetCode不同路径 II

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;参考【算法与数据结构】62、LeetCode不同路径的题目&#xff0c;可以发现本题仅仅是多了障碍物。我们还…

springboot下载图片的简单处理方式

参考地址 springboot&#xff1a;各种下载文件的方式_springboot下载文件-CSDN博客 开箱即用实战 GetMapping("/t1")public void down1(HttpServletResponse response) throws Exception {response.reset();response.setContentType("application/octet-strea…