VUE elTree无子级隐藏展开图标方式

VUE elTree无子级隐藏展开图标

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

查阅官方文档如下描述

支持bool和函数回调处理，这里咱们选择更灵活的函数回调实现。

给el-tree结构配置一下props

注意！ :props="defaultProps"

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

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。