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中输入框事件的使用及数值校验方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vue+ElementUi实现点击表格链接页面跳转和路由效果
这篇文章主要介绍了Vue+ElementUi实现点击表格中链接进行页面跳转和路由,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了 详解在vue使用weixin-js-sdk常见使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
在vuejs中,我们经常使用axios来请求数据,但是有时候,我们请求的数据量很大,那么我们如何实现滑动滚动条来加载数据呢,接下来小编就给大家介绍一下在vuejs中如何实现滑动滚动条来动态加载数据,需要的朋友可以参考下2023-10-10
Vue是一套用于构建用户界面的渐进式JavaScript框架,是目前最火的前端框架之一,是前端工程师的必备技能,下面这篇文章主要给大家介绍了关于Vue3.2.x中的小技巧及注意事项的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要和大家一起学习vue.js的计算属性，分享一些计算属性练习代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景，本文主要介绍了Vue动态查询规则生成组件，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了vuecli项目构建SSR服务端渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
我们大家在开发中,经常会遇到接口重复请求导致的各种问题,下面这篇文章主要给大家介绍了关于axios拦截器之重复请求取消的相关资料,需要的朋友可以参考下2021-09-09
解决报错ValidationError: Progress Plugin Invalid&
这篇文章主要介绍了解决报错ValidationError: Progress Plugin Invalid Options问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论