el-tree自定义节点内容

复制代码
        <el-tree :data="data" :props="defaultProps" ref="treeRef" show-checkbox @check-change="handleCheckChange">
                <!-- 自定义节点内容 -->
                <template #default="{ node, data, store }">
                    <span class="tree-node-content">
                        <!-- 黄色五角星 -->
                        <span v-if="node.level != 1" class="yellow-star" @click="handleStarClick(node)"><el-icon>
                                <Star />
                            </el-icon></span>
                        <!-- 节点文本 -->
                        <span class="node-label">{{ node.label }}</span>
                        <span v-if="node.level != 1"
                            style="width: 10px;height: 10px;background: red;border-radius: 50%;margin-left: 18px;"></span>
                    </span>
                </template>
            </el-tree>

效果图

相关推荐
HUMHSX3 分钟前
Vue 组件通信核心知识点梳理
javascript·vue.js·ecmascript
风止何安啊17 分钟前
🚦 前端并发请求 “交通管制”:别让你的接口堵成早高峰
前端·javascript·面试
J船长21 分钟前
扫盲烂笔头:A 记录、CNAME 的作用, Nginx的用途,为啥叫反向代理
前端
妙码生花27 分钟前
从 PHP 到 AI + Golang,程序员自救转型手记(二十六):icon 组件封装
前端·vue.js·typescript
李明卫杭州28 分钟前
Vue2 & Vue3 中 Router `props` 配置详解:彻底摆脱 `$route` 依赖
前端·vue.js·前端框架
掘金一周28 分钟前
裁员了,公司很爽快,赔偿一分没少 | 沸点周刊 7.8
前端·人工智能·后端
熊猫钓鱼>_>32 分钟前
2026 前端的三场底层革命:当 Vue、React Native 和 Three.js 同时去掉中间层
前端·javascript·vue.js·react native·架构·webgl·three.js
名字还没想好☜42 分钟前
React useEffect 依赖数组踩坑:闭包陷阱与清理函数
前端·javascript·react.js·react·useeffect
自己记录_理解更深刻1 小时前
Computed 聚合依赖+ 竞态处理
vue.js
宸翰1 小时前
uni-app 设置 Android 底部虚拟导航栏背景色
android·前端·uni-app