vue3+ant design vue动态实现级联菜单~
1、这里使用的是ant design vue 的TreeSelect 树选择来实现的。
<a-form-item name="staffDept" label="责任部门" labelAlign="left"><a-tree-selectv-model:value="formState.staffDept"show-search//允许在下拉框中添加搜索框style="width: 100%":dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"//设置下拉菜单的最大高度和溢出行为placeholder="请输入"allow-clear//显示清楚按钮tree-default-expand-all//默认展开所有树节点:tree-data="treeData"//将数据绑定在树形结构上/>
</a-form-item>import type { TreeSelectProps } from 'ant-design-vue';
import {getOrganizationChatrt} from '@/api/import';
const treeData = ref<TreeSelectProps['treeData']>([]);
const formState = ref({staffDept: '',
});
const handData = (array, level?) => {array.forEach((item, index) => {if (level === 0) {//获取一级菜单item.title = item.deptName;item.value = item.deptId;}if (item.nodeOfChildren != null) {//获取二级菜单item.children = [...item.nodeOfChildren];item.children.map((res) => {res.title = res.deptName;res.value = res.deptId;});handData(item.nodeOfChildren);//递归遍历，获取后续菜单如三级菜单}});treeData.value = array;
};
onMounted(() => {getOrganizationChatrt({}).then((res) => {console.log('测试数据', res);handData(res, 0);});
});
//假设这是后端返回的数据
[{"deptId": "00001","deptName": "营销中心","parentDeptId": "a00001","nodeOfChildren": [{"deptId": "000011","deptName": "网络管理部","parentDeptId": "00001","nodeOfChildren": [{"deptId": "0000111","deptName": "网络开发","parentDeptId": "000011","nodeOfChildren": null,"title": "网络开发","value": "001"},{"deptId": "0000112","deptName": "网络管理","parentDeptId": "000011","nodeOfChildren": null,"title": "网络管理","value": "002"}]},{"deptId": "000012","deptName": "市场营销部","parentDeptId": "00001","nodeOfChildren": null}]}
]2、效果图
