亲宝软件园·资讯

展开

treeSelect树组件设置父节点禁用的方法实例

小刘加油! 人气:0

前言:

项目开发中需求方提了这样一个需求:下拉框数据是树形结构,但父节点禁止点选,只能点击子节点。毫无疑问,选用的是 ant design vue 组件库的 treeSelect 组件。但该组件默认每一级节点都可以进行选择,不符合需求。于是开始看API,发现 treeData 的 props 有这样一个属性:disabled ,可以控制节点是否禁用。

思路:

看到这里,心里就有了思路:只需要把接口返回的树形数据进行处理,在每一层的父节点上添加:disabled: true 属性即可实现父节点禁用。

难点:

和普通的数组数据不同,普通数据下面不会嵌套多层 children,而后端接口返回的树形数据,不能确定嵌套了多少层 children,所以无法正常使用 map 对数据进行遍历添加。

解决:

方法也很简单,使用 递归 即可解决。

为此,我专门封装了一个方法,方面以后使用。

代码

// 传参: treeData: 树形数据
const addKey = (treeData: any) => {
    return treeData.map((item: any) => ({
         ...item,
         disabled: item.childrenList?.length>0 ? true : false,
         childrenList: item.childrenList?addKey(item.childrenList) : []
    }))
}

效果:

实现效果如下图所示:每层的父节点都被禁用,只有最底层的子节点才可以进行选择。

总结

加载全部内容

相关教程
猜你喜欢
用户评论