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
从零开始搭建uni-app框架的小程序开发环境
从零开始搭建uni-app框架的小程序开发环境
1628 0
从零开始搭建uni-app框架的小程序开发环境
|
3月前
|
人工智能 文字识别 API
阿里云百炼Qwen3.7模型怎么选?Qwen3.7-Max、Qwen3.7-Plus、Qwen3.7-Flash、Qwen-VL区别与选择参考
本文针对阿里云百炼平台四款核心千问3.7系列模型,提供了清晰的选型指南与优惠解读。旗舰款Qwen3.7-Max主打长链路推理与复杂代码任务,限时5折;均衡款Qwen3.7-Plus为全能多模态选手,限时8折;轻量款Qwen3.6-Flash适配高并发低延迟场景,成本最低;Qwen-VL系列则聚焦纯视觉理解与工业质检等专用场景。用户可通过Token Plan包季订阅叠加折扣,全模型通用抵扣最低至4.5折,结合错峰调用进一步压缩成本,实现不同业务场景下的最优AI投入产出比。
|
11月前
|
安全 开发者 iOS开发
Mac上安装Caffeinated 2.0.6.dmg详细步骤|小白也能看懂(附安装包)
Caffeinated for Mac v2.0.6 是一款防止Mac休眠的小工具,支持dmg格式安装。下载后通过访达打开dmg文件,拖拽至应用程序即可安装。若遇“无法验证开发者”提示,可在隐私与安全性中点击“仍要打开”。安装后可通过应用程序或启动台运行,轻松保持系统常亮。
|
Web App开发 移动开发 编解码
浏览器播放RTSP视频流几种解决方案
Streamedian 提供了一种“html5_rtsp_player + websock_rtsp_proxy”的技术方案,可以通过html5的video标签直接播放RTSP的视频流。
3161 0
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
3042 0
|
监控 安全 数据挖掘
淘宝/天猫:使用优惠券发放API设计满减活动,刺激消费欲望
本文介绍如何利用淘宝/天猫优惠券发放API设计满减活动,通过动态发放、自定义规则提升转化率与客单价。结合行为经济学原理,详解满减逻辑、消费刺激机制,并提供Python代码示例,助力商家自动化营销,实现GMV增长。(238字)
|
人工智能 编解码 网络架构
GenCast:谷歌DeepMind推出的AI气象预测模型
GenCast是由谷歌DeepMind推出的革命性AI气象预测模型,基于扩散模型技术,提供长达15天的全球天气预报。该模型在97.2%的预测任务中超越了全球顶尖的中期天气预报系统ENS,尤其在极端天气事件的预测上表现突出。GenCast能在8分钟内生成预报,显著提高预测效率,并且已经开源,包括代码和模型权重,支持更广泛的天气预报社区和研究。
1821 14
GenCast:谷歌DeepMind推出的AI气象预测模型
|
NoSQL 关系型数据库 MongoDB
MongoDB的安装配置及使用
MongoDB的安装配置及使用
5796 0