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>

效果图

相关推荐
小满zs2 小时前
React-router v7 第五章(路由懒加载)
前端·react.js
Aotman_2 小时前
Vue el-from的el-form-item v-for循环表单如何校验rules(二)
前端·javascript·vue.js
BillKu3 小时前
Vue3父子组件数据双向绑定示例
javascript·vue.js·elementui
在无清风4 小时前
Java实现Redis
前端·windows·bootstrap
_一条咸鱼_5 小时前
Vue 配置模块深度剖析(十一)
前端·javascript·面试
yechaoa6 小时前
Widget开发实践指南
android·前端
赤橙红的黄6 小时前
Spring Boot中接入DeepSeek的流式输出
java·服务器·javascript
前端切图仔0016 小时前
WebSocket 技术详解
前端·网络·websocket·网络协议
upp7 小时前
[bug]langchain agent报错Invalid Format: Missing ‘Action Input:‘ after ‘Action:‘
javascript·python·langchain·bug
JarvanMo7 小时前
关于Flutter架构的小小探讨
前端·flutter