类似下方的结构,分公司、部门、职务、人员都在不同的表里面,返回的接口是4个接口,要怎么实现这种树形,大佬们帮帮忙,看了官方文档有个异步加载的,点击某个分公司把参数发送给后端搜索出分公司下方有什么部门,试了一下,不会用
3条回答 默认 最新
- 少十步 2021-05-26 16:28关注
<a-tree :load-data="onLoadData" :tree-data="treeData" /> data() { return { treeData: [ { title: 'Expand to load', key: '0', value: '公司' }, { title: 'Expand to load', key: '1', value: '公司' }, ], } methods: { async onLoadData(treeNode) { const { value, key } = treeNode.dataRef // dataRef数据结构 // dataRef: { // children: (2) [{…}, {…}] // key: "1" // title: "Expand to load" // value: "公司"} // 根据value 值去请求接口 switch (value) { case '子公司': treeNode.dataRef.children = await this.getNextCompany(key) break } this.treeData = [...this.treeData] }, // 获取公司接口请求定义,async axios, 获取公司接口在页面加载时就请求, 并赋值给 treeData async getCompany() { // return json数组,数据格式, title, key, value: 根据value 区分是哪一级的数据 // [ // { title: 'Expand to load', key: '0', value: '公司' }, // { title: 'Expand to load', key: '1', value: '公司' }, // ] }, // 获取分公司,根据公司id获取子公司 async getNextCompany(id) { // return json数组,数据格式, title, key, value: 根据value 区分是哪一级的数据 // [ // { title: 'Expand to load', key: '0', value: '子公司' }, // { title: 'Expand to load', key: '1', value: '子公司' }, // ] }, // 获取部门,根据子公司id获取部门 async getDepartMent(id) { // return json数组,数据格式, title, key, value: 根据value 区分是哪一级的数据 // [ // { title: 'Expand to load', key: '0', value: '部门' }, // { title: 'Expand to load', key: '1', value: '部门' }, // ] }, // 获取职务,根据部门id获取职务 async getJob(id) { // return json数组,数据格式, title, key, value: 根据value 区分是哪一级的数据 // [ // { title: 'Expand to load', key: '0', value: '职务' }, // { title: 'Expand to load', key: '1', value: '职务' }, // ] }, // 获取员工,根据职务id获取员工 async getUser(id) { // return json数组,数据格式, title, key, value: 根据value 区分是哪一级的数据,最后一级设置是叶子节点 // [ // { title: 'Expand to load', key: '0', value: '员工', isLeaf:true }, // { title: 'Expand to load', key: '1', value: '员工', isLeaf:true }, // ] }, },
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用
悬赏问题
- ¥100 有人会搭建GPT-J-6B框架吗?有偿
- ¥15 求差集那个函数有问题,有无佬可以解决
- ¥15 【提问】基于Invest的水源涵养
- ¥20 微信网友居然可以通过vx号找到我绑的手机号
- ¥15 寻一个支付宝扫码远程授权登录的软件助手app
- ¥15 解riccati方程组
- ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
- ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
- ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
- ¥50 树莓派安卓APK系统签名