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 前端开发
推荐8个炫酷的数据可视化大屏项目
推荐8个炫酷的数据可视化大屏项目
6748 1
|
12月前
|
SQL 存储 运维
别让运维数据“各过各的”:聊聊数据湖怎么搭,才能不成“沼泽”
别让运维数据“各过各的”:聊聊数据湖怎么搭,才能不成“沼泽”
420 0
|
Web App开发 移动开发 编解码
浏览器播放RTSP视频流几种解决方案
Streamedian 提供了一种“html5_rtsp_player + websock_rtsp_proxy”的技术方案,可以通过html5的video标签直接播放RTSP的视频流。
3076 0
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
2954 0
|
10月前
|
监控 安全 数据挖掘
淘宝/天猫:使用优惠券发放API设计满减活动,刺激消费欲望
本文介绍如何利用淘宝/天猫优惠券发放API设计满减活动,通过动态发放、自定义规则提升转化率与客单价。结合行为经济学原理,详解满减逻辑、消费刺激机制,并提供Python代码示例,助力商家自动化营销,实现GMV增长。(238字)
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
6548 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
NoSQL 关系型数据库 MongoDB
MongoDB的安装配置及使用
MongoDB的安装配置及使用
5717 0
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
3106 0

热门文章

最新文章