当前位置: 首页 > news >正文

elementui中的tree自定义图标

需求:实现如下样式的树形列表

自定义树的图标以及点击时,可以根据子级的关闭,切换图标

<el-tree :data="treeList" :props="defaultProps"><template #default="{ node, data }"><span class="custom-tree-node"><img v-if="!node.expanded " class="node-img" :src="./aaa.svg" /><img v-if="node.expanded" class="node-img" :src="./bbb.svg" /><span>{{ node.label }}</span></span></template>
</el-tree>

参考:element-ui的el-tree自定义图标 - 简书

https://download.csdn.net/blog/column/12320696/130819498

相关文章:

elementui中的tree自定义图标

需求&#xff1a;实现如下样式的树形列表 自定义树的图标以及点击时&#xff0c;可以根据子级的关闭&#xff0c;切换图标 <el-tree :data"treeList" :props"defaultProps"><template #default"{ node, data }"><span class&quo…...

mybatis实现模糊搜索

这里使用if标签进行是实现&#xff0c;使用like标签也可以实现&#xff0c;只是容易出错了&#xff0c;下面 直接上代码 只需要把字段名和搜索条件替换就行。 <select id"selectByLike" parameterType"map" resultType"YourResultType">…...

ssh 修改端口号 一个ip ssh多个主机

ssh默认端口为22。 通过路由映射&#xff0c;保留一个22端口&#xff0c;其它主机修改端口&#xff0c;可以用一个ip ssh多个主机。 修改端口需修改/etc/ssh/sshd_config sudo vim /etc/ssh/sshd_config/Port #Port 22删除前面的#&#xff0c;然后修改端口号&#xff0c;如23 …...

Proto文件如何生成JavaProto对象?

首先安装好Protocol Buffer的编译器 Protocol Buffer: version:2.6.1 link: 链接直达 根据电脑环境进行下载&#xff0c;Widnwos 32/64位就选择win32是没问题的&#xff0c;楼主亲测 1.proto文件编写 Person.proto public class Person {String name;int id;String email…...

LightDB 24.1 UNION支持null类型匹配

背景介绍 在LightDB 24.1之前的版本&#xff0c;UNION null类型匹配会报错。 lightdbpostgres# select null l_zqlbmx2 union all select null l_zqlbmx2 union all select sysdate l_zqlbmx; ERROR: UNION types text and timestamp without time zone…...

使用vs2022将.net8的应用程序发布为一个单独文件

在使用.NetCore3.1时&#xff0c;可以通过设置以下工程配置文本来将项目发布为一个单独的应用程序文件&#xff1a; <Project Sdk"Microsoft.NET.Sdk.WindowsDesktop"><PropertyGroup><TargetFramework>netcoreapp3.1</TargetFramework><…...

面试经典150题(93-95)

leetcode 150道题 计划花两个月时候刷完&#xff0c;今天&#xff08;第五十三天&#xff09;完成了3道(93-95)150&#xff1a; 93.&#xff08;53. 最大子数组和&#xff09;题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&am…...

flask 实现token生成以及携带token请求接口

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Flask-JWT-Extended是什么&#xff1f;二、使用步骤1.引入库2.请求验证 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 提示&…...

docker-compose部署单机ES+Kibana

记录部署的操作步骤 准备工作编写docker-compose.yml启动服务验证部署结果 本次elasticsearch和kibana版本为8.2.2 使用环境&#xff1a;centos7.9 本次记录还包括&#xff1a;安装elasticsearch中文分词插件和拼音分词插件 准备工作 1、创建目录和填写配置 mkdir /home/es/s…...

gitee仓库项目迁移到gitlab仓库

背景 之前一直使用gitee代码仓库提交代码&#xff0c;现在需要将gitee仓库中的代码迁移到gitlab中&#xff0c;并保留原有的提交记录。 前提 配置好了本地git&#xff0c;并本地与gitlab仓库已连接。 我这里使用 ssh方式拉去代码&#xff0c;因此需要配置ssh密钥 步骤 也可以直…...

安装elasticsearch、kibana、IK分词器

1.部署单点es 1.1.创建网络 因为我们还需要部署kibana容器&#xff0c;因此需要让es和kibana容器互联。这里先创建一个网络&#xff1a; docker network create es-net 1.2.加载镜像 这里我们采用elasticsearch的7.12.1版本的镜像&#xff0c;这个镜像体积非常大&#xff0…...

海外云手机运营Instagram攻略

Instagram是世界著名的社交媒体平台&#xff0c;有着10亿实时用户&#xff0c;是跨境电子商务的优质流量来源。平台以女性用户为主&#xff0c;购物倾向高&#xff0c;转化率好。它被公认为外贸行业的优质社交媒体流量池。那么&#xff0c;如何使用海外云手机吸引Instagram上的…...

【lesson25】学习MySQL事务前的基础知识

文章目录 CURD不加控制&#xff0c;会有什么问题&#xff1f;CURD满足什么属性&#xff0c;能解决上述问题&#xff1f;什么是事务&#xff1f;为什么会出现事务事务的版本支持 CURD不加控制&#xff0c;会有什么问题&#xff1f; CURD满足什么属性&#xff0c;能解决上述问题&…...

SkyWalking+es部署与使用

第一步下载skywalking :http://skywalking.apache.org/downloads/ 第二步下载es:https://www.elastic.co/cn/downloads/elasticsearch 注&#xff1a;skywalking 和es要版本对应&#xff0c;可从下面连接查看版本对应关系&#xff0c;8.5.0为skywalking 版本号 Index of /di…...

js获取html中的img标签,图片标签,提取src属性并替换操作

场景&#xff1a; 获取HTML中的所有图片标签&#xff0c;并把图片的src属性替换成webp图片, 若浏览器支持webp&#xff0c;则展示&#xff0c;不支持走onerror函数展示data-original原图。 function getDetailWebp(htmlStr, width 600){if(!htmlStr) return ;var reg /<im…...

【力扣经典面试题】27. 移除元素

题目描述&#xff1a; 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑…...

MicrosoftEdge浏览器打开网页出现“此网站被人举报不安全”问题时解决办法

1&#xff1a;有时候不知怎么回事用电脑自带的微软浏览器进行搜索会出现以下的问题 这可能是由于我们的浏览器安全审查过于严格引起的 Windows10正式版系统下&#xff0c;使用Edge浏览器浏览网页时候&#xff0c;发现整个页面突然变成了红色&#xff0c;显示“已有人举报此网站…...

【PyCharm教程】PyCharm 安装、卸载和升级包

PyCharm 为特定的 Python 解释器提供了安装、卸载和升级 Python 包的方法。默认情况下&#xff0c;PyCharm 使用 pip 来管理项目包。对于 Conda 环境&#xff0c;您可以使用conda 包管理器。 在 PyCharm 中&#xff0c;您可以在Python 包工具窗口和 Python 解释器Settings/Pre…...

蓝桥杯-常用STL(一)

常用STL &#x1f388;1.动态数组&#x1f388;2.vector的基础使用&#x1f52d;2.1引入库&#x1f52d;2.2构造一个动态数组&#x1f52d;2.3插入元素&#x1f52d;2.4获取长度并且访问元素&#x1f52d;2.5修改元素&#x1f52d;2.6删除元素&#x1f52d;2.7清空 &#x1f38…...

SQL查询数据库环境(dm8达梦数据库)

SQL查询数据库环境dm8达梦数据库 环境介绍 环境介绍 某些环境没有图形化界面,可以使用sql语句查询达梦数据库环境情况 SELECT 实例名称 数据库选项,INSTANCE_NAME 数据库选项相关参数值 FROM V$INSTANCE UNION ALL SELECT 授权用户,(SELECT AUTHORIZED_CUSTOMER FROM V$LICE…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...