VUE elTree 无子级 隐藏展开图标

这4个并没有下级节点,即它并不是叶子节点,就不需求展示前面的三角展开图标!

查阅官方文档如下描述,支持bool和函数回调处理,这里咱们选择更灵活的函数回调实现。

给el-tree结构配置一下props,注意! :props="defaultProps"

javascript 复制代码
<el-tree :data="treeList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

在data中添加配置项,如下:isLeaf是一个函数,subCount 是接口返回的表明此节点是否还有可展开项的标记,大于1时说明还有下级需要展开,否则不要展开

defaultProps: {
    children: 'children',
    label: 'id',
    isLeaf: (data, node) => {
        return data.subCount >= 1 ? false : true
    }
}

完成后,刷新页面显示正常,不再给用户制造操作误途

相关推荐
万少26 分钟前
产品原型不用从零画 -GPT 出图,Gemini 生成 HTML
前端·javascript·后端
逐光老顽童1 小时前
用 Go 实现一个 LLM 路由网关:Thompson Sampling 与自适应故障转移实践
vue.js·go
wuhen_n1 小时前
RAG 第一步:多格式文档加载与文本预处理实战
前端·langchain·ai编程
程序员黑豆1 小时前
全新系列开启:AI 全栈开发
前端·后端·全栈
小小小小宇1 小时前
Partial Clone
前端
小小小小宇1 小时前
git sparse-checkout(稀疏检出)
前端
ZC跨境爬虫2 小时前
跟着 MDN 学JavaScript day_9:字符串方法实战挑战与解题思路
开发语言·前端·javascript
夜焱辰2 小时前
WebMCP 的正确打开方式:只注册 2 个工具,代理 N 个——CreatorWeave 的 On-Demand 实践
前端
hewins2 小时前
NestJS 从入门到精通
javascript
柒和远方2 小时前
LeetCode 452. 用最少数量的箭引爆气球 —— 区间贪心经典:排序 + 扫描一箭穿心
javascript·python·算法