效果图:
灰色的父节点是被禁用不能点击的
关键代码:
格式化后台数据和禁用点击父元素
<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); } }); })(); } });