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>

效果图

相关推荐
亿元程序员2 分钟前
游戏接入微信登录(含上架应用市场)全流程
前端
晓得迷路了7 分钟前
栗子前端技术周刊第 106 期 - pnpm 10.21、Node.js v25.2.0、Bun v1.3.2...
前端·javascript·html
码上成长25 分钟前
<script setup> 实战模式:大型组件怎么拆?
开发语言·javascript·vue.js
花归去27 分钟前
【Vue3】 中的 【unref】:详解与使用
前端·javascript·vue.js
小霖家的混江龙36 分钟前
巧用辅助线,轻松实现类拼多多的 Tab 吸顶效果
前端·javascript·react.js
q***23571 小时前
Spring Boot+Vue项目从零入手
vue.js·spring boot·后端
A***27951 小时前
前端路由管理最佳实践,React Router
前端·react.js·前端框架
恋猫de小郭1 小时前
Snapchat 开源全新跨平台框架 Valdi ,一起来搞懂它究竟有什么特别之处
android·前端·flutter
艾小码1 小时前
还在为异步组件加载烦恼?这招让你的Vue应用更丝滑!
前端·javascript·vue.js
几何心凉5 小时前
openGauss:多核时代企业级数据库的性能与高可用新标杆
前端·数据库·数据库开发