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);
                  }
                });
              })();
            }
          });
相关文章
|
定位技术 开发者
uni-app获取地理位置
uni-app获取地理位置
1850 0
|
7月前
|
JavaScript API 开发工具
如何在原生App中调用Uniapp的原生功能?
如何在原生App中调用Uniapp的原生功能?
982 139
|
缓存 JavaScript
Vue computed详解
computed是Vue中一个计算属性,它可以根据依赖的数据动态计算出一个新的值,并将其缓存起来。computed属性是基于它们的依赖进行缓存的,只有当依赖发生变化时,才会重新计算。 computed属性具有以下特性: • 缓存:computed属性会缓存计算结果,在依赖不变时直接返回缓存值,提高性能。 • 响应式:当依赖发生变化时,computed属性会自动重新计算并更新。 • 依赖追踪:Vue会自动追踪computed属性所依赖的数据,并在其发生变化时触发重新计算。
537 0
|
11月前
|
人工智能 API 开发者
智能体(AI Agent)开发实战之【LangChain】(一)接入大模型输出结果
LangChain 是一个开源框架,专为构建与大语言模型(LLMs)相关的应用设计。通过集成多个 API、数据源和工具,助力开发者高效构建智能应用。本文介绍了 LangChain 的环境准备(如安装 LangChain、OpenAI 及国内 DeepSeek 等库)、代码实现(以国内开源大模型 Qwen 为例,展示接入及输出结果的全流程),以及核心参数配置说明。LangChain 的灵活性和强大功能使其成为开发对话式智能应用的理想选择。
|
8月前
|
监控 安全 数据挖掘
淘宝/天猫:使用优惠券发放API设计满减活动,刺激消费欲望
本文介绍如何利用淘宝/天猫优惠券发放API设计满减活动,通过动态发放、自定义规则提升转化率与客单价。结合行为经济学原理,详解满减逻辑、消费刺激机制,并提供Python代码示例,助力商家自动化营销,实现GMV增长。(238字)
536 0
|
Web App开发 移动开发 编解码
浏览器播放RTSP视频流几种解决方案
Streamedian 提供了一种“html5_rtsp_player + websock_rtsp_proxy”的技术方案,可以通过html5的video标签直接播放RTSP的视频流。
2827 0
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
6268 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
JavaScript 前端开发 安全
如何学好JavaScript:从初学者到专家的学习指南
JavaScript是一门强大的编程语言,用于在网页上创建交互性和动态性。无论你是初学者还是有经验的开发者,学好JavaScript都是一个有价值的追求。这篇文章将指导你如何系统地学习JavaScript,并逐步提升你的技能水平,从初学者到专家。
|
API
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
4602 0