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
    }
}

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

相关推荐
匹马夕阳11 分钟前
基于Canvas和和原生JS实现俄罗斯方块小游戏
javascript·canva可画
m0_6161884912 分钟前
Vue3 中 Computed 用法
前端·javascript·vue.js
六个点15 分钟前
图片懒加载与预加载的实现
前端·javascript·面试
weixin_4607838721 分钟前
Flutter解决TabBar顶部页面切换导致页面重载问题
android·javascript·flutter
Patrick_Wilson37 分钟前
🔥【全网首篇】30分钟带你从0到1搭建基于Lynx的跨端开发环境
前端·react.js·前端框架
逍遥客.39 分钟前
uniapp对接打印机和电子秤
javascript·vue.js·uni-app
小沙盒40 分钟前
godot在_process()函数实现非阻塞延时触发逻辑
javascript·游戏引擎·godot
Moment44 分钟前
前端 社招 面筋分享:前端两年都问些啥 ❓️❓️❓️
前端·javascript·面试
Moment44 分钟前
一坤时学习 TS 中的装饰器,让你写 NestJS 不再手软 😏😏😏
前端·javascript·面试
子洋44 分钟前
AnythingLLM + SearXNG 实现私有搜索引擎代理
前端·人工智能·后端