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

相关推荐
一枚前端小能手9 小时前
🗂️ 文件系统API深度解析 - 让Web应用拥有本地文件操作能力的现代API实战指南
前端·javascript
陈随易10 小时前
编程语言MoonBit:在前端开发中的妙用
前端·后端·程序员
一枚前端小能手10 小时前
「周更第10期」实用JS库推荐:VueUse
前端·javascript·vue.js
前端摸鱼匠10 小时前
Vue 3 事件修饰符全解析:从 .stop 到 .passive,彻底掌握前端交互的艺术
前端·vue.js·node.js·vue·交互
BraveAriesZyc10 小时前
vue封装一个静态资源的文件
前端
FinClip10 小时前
工行APP深夜惊魂!账户一夜清零,金融机构如何筑牢数字防火墙?
前端·javascript·github
inx17710 小时前
用纯 CSS 实现甜蜜亲吻动画:关键帧与伪元素的实战练习
前端·css
JarvanMo10 小时前
Flutter UI中的无声杀手
前端
inx17710 小时前
从拼接到优雅:用 ES6 模板字符串和 map 打造更简洁的前端代码
前端·javascript·dom
AirDroid_cn10 小时前
Windows11 Edge 浏览器访问麦克风被阻止如何解除?
前端·edge