「已注销」 2021-05-26 14:55 采纳率: 71.4%
浏览 194
已采纳

Ant Design Vue 树形控件怎么实现4个接口返回的4个数据源的数据展示

类似下方的结构,分公司、部门、职务、人员都在不同的表里面,返回的接口是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 },
          // ]
        },
      },
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥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系统签名