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>

效果图

相关推荐
青花雅月1 分钟前
解决复用页面只是接口不同的问题的完整指南
前端
FogLetter2 分钟前
前端组件通信新姿势:用mitt实现Toast组件的优雅通信
前端·react.js
每天开心5 分钟前
🐞一次由事件冒泡引发的 React 弹窗关闭 Bug 排查与解决
前端·javascript·debug
大内密探5 分钟前
初探tiptap,实现一个结构化报告模板
前端
星_离6 分钟前
深入解析Vue2插槽
前端·vue.js
kartjim6 分钟前
2025 年现代 Node.js 模式
前端·javascript·node.js
拾光拾趣录8 分钟前
基础 | 🔥ES6三剑客:let/const/var谁主沉浮?🤯
前端·面试
老华带你飞17 分钟前
数码论坛|基于SprinBoot+vue的数码论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·数码论坛系统
拾光拾趣录41 分钟前
基础 | 🔥闭包99%盲区?内存泄漏炸弹💣已埋!
前端·面试
拾光拾趣录1 小时前
🔥前端性能优化9大杀招,第5招面试必挂?📉
前端·面试