效果图:
灰色的父节点是被禁用不能点击的
关键代码:
格式化后台数据和禁用点击父元素
<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);
}
});
})();
}
});
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_52691965/article/details/121558953
内容来源于网络,如有侵权,请联系作者删除!