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>

效果图

相关推荐
我命由我123457 分钟前
VSCode - Prettier 配置格式化的单行长度
开发语言·前端·ide·vscode·前端框架·编辑器·学习方法
HashTang8 分钟前
【AI 编程实战】第 4 篇:一次完美 vs 五轮对话 - UnoCSS 配置的正确姿势
前端·uni-app·ai编程
JIngJaneIL16 分钟前
基于java + vue校园快递物流管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js
asdfg125896333 分钟前
JS中的闭包应用
开发语言·前端·javascript
kirk_wang34 分钟前
Flutter 导航锁踩坑实录:从断言失败到类型转换异常
前端·javascript·flutter
梦里不知身是客111 小时前
spark中如何调节Executor的堆外内存
大数据·javascript·spark
静小谢1 小时前
前后台一起部署,vite配置笔记base\build
前端·javascript·笔记
用户47949283569152 小时前
改了CSS刷新没反应-你可能不懂HTTP缓存
前端·javascript·面试
还好还好不是吗2 小时前
老项目改造 vue-cli 2.6 升级 rsbuild 提升开发效率300% upupup!!!
前端·性能优化