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);
                  }
                });
              })();
            }
          });
相关文章
【el-tree】树形结构拖拽,拖动修改分组
【el-tree】树形结构拖拽,拖动修改分组
591 1
|
JSON JavaScript 数据格式
Elementui Tree 树形控件删除子节点
Elementui Tree 树形控件删除子节点
94 1
|
1月前
扩展combo下拉树
扩展combo下拉树
11 2
|
4月前
|
前端开发 JavaScript
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
285 0
|
前端开发 JavaScript
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
445 0
|
JSON JavaScript 前端开发
Elementui Tree 树形控件删除功能
Elementui Tree 树形控件删除功能
111 0
Elementui Tree 树形控件删除功能
|
6月前
el-tree饿了么elementUI tree树结构插件设置全部展开折叠
el-tree饿了么elementUI tree树结构插件设置全部展开折叠
|
存储 数据格式
55EasyUI 树形菜单- 树形菜单加载父/子节点
55EasyUI 树形菜单- 树形菜单加载父/子节点
34 0
60EasyUI 树形菜单- 树形网格惰性加载节点
60EasyUI 树形菜单- 树形网格惰性加载节点
38 0