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】树形结构拖拽,拖动修改分组
669 1
|
3月前
扩展combo下拉树
扩展combo下拉树
15 2
|
6月前
|
前端开发 JavaScript
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
390 0
|
8月前
|
JavaScript 前端开发
【vue】设计组织机构树,增删改查,右键导航树弹出菜单对点前节点增删改,特殊字符校验
【vue】设计组织机构树,增删改查,右键导航树弹出菜单对点前节点增删改,特殊字符校验
63 1
|
前端开发 API
ant design控制tag选中的写法
ant design控制tag选中的写法
108 0
|
8月前
element plus 可选择树形组件(el-tree) 怎样一键展开/收起?实现方法详解
element plus 可选择树形组件(el-tree) 怎样一键展开/收起?实现方法详解
945 2
|
8月前
Vue3组件库 -- element plus 树形选择器组件怎样显示已有的树形菜单?
Vue3组件库 -- element plus 树形选择器组件怎样显示已有的树形菜单?
113 0
|
JSON JavaScript 数据格式
Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
82 1
|
JSON JavaScript 前端开发
Elementui Tree 树形控件删除功能
Elementui Tree 树形控件删除功能
126 0
Elementui Tree 树形控件删除功能