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

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

相关推荐
J***Q2925 小时前
Vue数据可视化
前端·vue.js·信息可视化
JIngJaneIL6 小时前
社区互助|社区交易|基于springboot+vue的社区互助交易系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·社区互助
ttod_qzstudio7 小时前
深入理解 Vue 3 的 h 函数:构建动态 UI 的利器
前端·vue.js
芳草萋萋鹦鹉洲哦7 小时前
【elemen/js】阻塞UI线程导致的开关卡顿如何优化
开发语言·javascript·ui
_大龄7 小时前
前端解析excel
前端·excel
1***s6327 小时前
Vue图像处理开发
javascript·vue.js·ecmascript
一 乐7 小时前
应急知识学习|基于springboot+vue的应急知识学习系统(源码+数据库+文档)
数据库·vue.js·spring boot
槁***耿7 小时前
JavaScript在Node.js中的事件发射器
开发语言·javascript·node.js
一叶茶7 小时前
移动端平板打开的三种模式。
前端·javascript
前端大卫7 小时前
一文搞懂 Webpack 分包:async、initial 与 all 的区别【附源码】
前端