elementui中的tree自定义图标

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

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

html 复制代码
<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

相关推荐
invicinble9 分钟前
对于前端数据的生命周期的认识
前端
PieroPc13 分钟前
用FastAPI 后端 和 HTML/CSS/JavaScript 前端写一个博客系统 例
前端·html·fastapi
hunter145019 分钟前
2026.1.4 html简单制作
java·前端·笔记·html
鹏程十八少20 分钟前
Android 深入剖析Android内存泄漏:ViewPager2与Fragment的生命周期陷阱
android·前端·app
李少兄20 分钟前
深入理解 CSS opacity 属性
前端·css
幺零九零零21 分钟前
前端测试·1
前端
1024小神23 分钟前
uniapp项目中使用vue3和小程序组件父子通信
前端·小程序·uni-app
hxjhnct24 分钟前
React 为什么不采用(VUE)绑定数据?
javascript·vue.js·react.js
Knight_AL25 分钟前
Vue + Spring Boot 项目添加 /wvp 前缀的完整链路解析(从浏览器到静态资源)
前端·vue.js·spring boot
粟悟饭&龟波功25 分钟前
【软考系统架构设计师】九、架构演化与维护
前端·后端·架构·系统架构·软件工程