treeSelect树组件设置父节点禁用的方法实例
更新时间：2022年12月24日 10:13:26 作者：小刘加油！
这篇文章主要给大家介绍了关于treeSelect树组件设置父节点禁用的相关资料,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
前言：
项目开发中需求方提了这样一个需求：下拉框数据是树形结构，但父节点禁止点选，只能点击子节点。毫无疑问，选用的是 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) : []
}))
}效果：
实现效果如下图所示：每层的父节点都被禁用，只有最底层的子节点才可以进行选择。
总结
到此这篇关于treeSelect树组件设置父节点禁用的文章就介绍到这了,更多相关treeSelect树组件设置父节点禁用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家分享一篇vue实现图片加载完成前的loading组件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue实现给某个数据字段添加颜色方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit(
这篇文章主要介绍了vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效的解决方法，这里需要主要项目中用的element-ui是V1.4.3，感兴趣的朋友参考下吧2018-08-08
Vue2 Vue-cli中使用Typescript的配置详解
Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星，足以说明其以悄然成为主流。下面这篇文章主要给大家介绍了关于Vue2 Vue-cli中使用Typescript的配置的相关资料，需要的朋友可以参考下。2017-07-07
这篇文章主要为大家详细介绍了springboot+vue实现文件上传下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了深入理解vue的使用，对vue感兴趣的同学，可以参考下2021-05-05
基于 flexible 的 Vue 组件：Toast -- 显示框效果
这篇文章主要介绍了基于 flexible 的 Vue 组件：Toast -- 显示框效果,需要的朋友可以参考下2017-12-12
公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。下面小编给大家带来了基于vue实现一个炫酷的日历组件，感兴趣的朋友参考下吧2018-10-10
这篇文章主要介绍了vue引入axios同源跨域问题，文章给大家提供了解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了Vue之Mixins(混入)的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
最新评论