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属性所依赖的数据,并在其发生变化时触发重新计算。
555 0
|
数据可视化 JavaScript 前端开发
推荐8个炫酷的数据可视化大屏项目
推荐8个炫酷的数据可视化大屏项目
6468 1
|
12月前
|
人工智能 API 开发者
智能体(AI Agent)开发实战之【LangChain】(一)接入大模型输出结果
LangChain 是一个开源框架,专为构建与大语言模型(LLMs)相关的应用设计。通过集成多个 API、数据源和工具,助力开发者高效构建智能应用。本文介绍了 LangChain 的环境准备(如安装 LangChain、OpenAI 及国内 DeepSeek 等库)、代码实现(以国内开源大模型 Qwen 为例,展示接入及输出结果的全流程),以及核心参数配置说明。LangChain 的灵活性和强大功能使其成为开发对话式智能应用的理想选择。
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
2842 0
|
Web App开发 移动开发 编解码
浏览器播放RTSP视频流几种解决方案
Streamedian 提供了一种“html5_rtsp_player + websock_rtsp_proxy”的技术方案,可以通过html5的video标签直接播放RTSP的视频流。
2990 0
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
6407 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
API
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
4718 0
|
搜索推荐 数据挖掘 API
拼多多根据ID取商品详情原数据API接口的开发应用与收益
拼多多作为中国知名电商平台,为开发者和企业提供丰富的API接口,助力快速接入平台,实现商品推广、订单管理等功能。其中,根据ID取商品详情原数据的API接口尤为重要,具备高效性、稳定性和安全性,广泛应用于电商数据分析、价格监测、竞品分析、商品推荐系统、移动应用开发及精准营销等领域,为企业带来显著收益。
424 0