Ant Design TreeSelect树形选择器格式化数据以及禁用父节点

简介: Ant Design TreeSelect树形选择器格式化数据以及禁用父节点

效果图:

灰色的父节点是被禁用不能点击的

image.png

关键代码:

格式化后台数据和禁用点击父元素

<a-tree-select
          v-model:value="value"  //uid唯一值
          tree-data-simple-mode   //使用简单格式的 treeData
          style="width: 70%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="treeData"
          :searchValue="value1"  //搜索框的值,可以通过 search 事件获取用户输入
          :disabled="is"
          placeholder="请选择UDF资源目录"
        />
//arr是后台穿过来的数组 
arr.map((item) => {//刚进来遍历每一项并重新赋值
            item.title = item.name;
            item.isLeaf = !item.dirctory;
            item.pId = item.pid;
            item.value = item.idValue;
            if (item.children.length > 0) {   //有子集才进入回调函数
              item.disabled = true;       //控制有子集的父元素为禁用
              (function bianli(e = item) {  //函数不传值默认为有子集的父元素
                e.children.forEach((item) => {  //遍历每个子集
                  item.title = item.name;
                  item.isLeaf = !item.dirctory;
                  item.pId = item.pid;
                  item.value = item.idValue;
                  if ("/" + item.name == value.value) {
                    value.value = item.idValue;
                  }
                  if (item.children.length > 0) {  //后台数据有子集的话就回调自己
                    bianli(item);
                  }
                });
              })();
            }
          });
相关文章
|
缓存 JavaScript
Vue computed详解
computed是Vue中一个计算属性,它可以根据依赖的数据动态计算出一个新的值,并将其缓存起来。computed属性是基于它们的依赖进行缓存的,只有当依赖发生变化时,才会重新计算。 computed属性具有以下特性: • 缓存:computed属性会缓存计算结果,在依赖不变时直接返回缓存值,提高性能。 • 响应式:当依赖发生变化时,computed属性会自动重新计算并更新。 • 依赖追踪:Vue会自动追踪computed属性所依赖的数据,并在其发生变化时触发重新计算。
432 0
|
10月前
|
前端开发 安全 UED
React 文件预览组件:File Preview
在现代Web应用中,文件上传和预览功能至关重要。本文基于React库,详细介绍如何构建文件预览组件,涵盖文件选择器、图片预览、文件大小限制及多种文件类型支持。通过实际代码示例,解析常见问题如跨域请求、文件路径处理和状态管理,并提供解决方案。帮助开发者提升用户体验,减少误操作。
745 2
|
算法 数据安全/隐私保护 索引
OFDM系统PAPR算法的MATLAB仿真,对比SLM,PTS以及CAF,对比不同傅里叶变换长度
本项目展示了在MATLAB 2022a环境下,通过选择映射(SLM)与相位截断星座图(PTS)技术有效降低OFDM系统中PAPR的算法实现。包括无水印的算法运行效果预览、核心程序及详尽的中文注释,附带操作步骤视频,适合研究与教学使用。
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。
3622 0
简述a标签超链接target属性的取值和作用
简述a标签超链接target属性的取值和作用
|
存储 JavaScript 前端开发
如何在 React Hooks 中使用 Redux?
【10月更文挑战第1天】
|
11月前
|
搜索推荐 数据挖掘 API
拼多多根据ID取商品详情原数据API接口的开发应用与收益
拼多多作为中国知名电商平台,为开发者和企业提供丰富的API接口,助力快速接入平台,实现商品推广、订单管理等功能。其中,根据ID取商品详情原数据的API接口尤为重要,具备高效性、稳定性和安全性,广泛应用于电商数据分析、价格监测、竞品分析、商品推荐系统、移动应用开发及精准营销等领域,为企业带来显著收益。
296 0
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
3462 0
|
存储 JavaScript
vue项目中页面跳转传参的方法
vue项目中页面跳转传参的方法
|
JavaScript 前端开发 安全
如何学好JavaScript:从初学者到专家的学习指南
JavaScript是一门强大的编程语言,用于在网页上创建交互性和动态性。无论你是初学者还是有经验的开发者,学好JavaScript都是一个有价值的追求。这篇文章将指导你如何系统地学习JavaScript,并逐步提升你的技能水平,从初学者到专家。