vue2 a-tree-select树形结构-懒加载（无限子级）---笔记

实现效果

思维导图 

 HTML代码treeData是绑定的数组onLoadData是懒加载函数

<a-tree-select 
  style="width: 100%; margin-left: 20px" 
  tree-data-simple-mode 
  multiple
  labelInValue
  placeholder="请选择…" 
  v-decorator="['leadersStr', { rules: [{ required: true, message: '请选择…' }] }]" 
  :tree-data="treeData"
  :disabled="readOnly"
  :load-data="onLoadData" 
/>

js代码部分接口返回的数据是数组包裹对象的形式前端需要组装

 官网中的isLeaf是叶子节点open为true时说明节点下有数据就不是叶子节点isLeaf要取反

注 这里兼顾到两种情况

1. pId和id相同导致数据挂不上页面

2. id和id之间相同机构id和人员id相同也会导致挂不上去

 要保持value和id的唯一性所以加一个随机数重新组装数据value=random + '-'+ value

页面初始化-请求接口数据

/* 获取带队领导姓名列表 */
    async getLaderOrg(orgId = '111111111') {
      let res = await findLeaderForOrg(orgId)
      if(res.success && res.body.length > 0) {
        this.treeData = res.body.map( v => {
          const random = Math.random().toString(36).substring(2, 6);
          /* 如果是人员匹配接口数据是否有已选中 */
          if(v.type == '2') {
            this.dealWithInitLeaders(v, random)
          }
          return {
            id: random + '/' + v.sid,
            pId: null,
            value: random + '-' + v.sid,
            title: v.title,
            selectable: v.type == '2',
            isLeaf: !v.open && v.type == '2',
            disabled: v.type == '1'
          }
        })
      }
    },

懒加载部分遍历数组最外层

/* 领导带队检查懒加载 */
    async onLoadData(treeNode) {
      return new Promise(resolve => {
        const { value, isLeaf } = treeNode
        this.genTreeNode(value, isLeaf)
        resolve()
      });
    },

    // 树加载
    async genTreeNode(key, isLeaf = false) {
      var arr = []
      /* key是拼接后的数据需要还原回接口返回的形势截断一下 */
      await findLeaderForOrg(key.split('/')[1]).then( res => {
        if(res.success && res.body.length > 0 ) {
          res.body.map( item => {
            const random = Math.random().toString(36).substring(2, 6);
            /* 回显 */
            if(item.type == '2') {
              this.dealWithInitLeaders(item, random)
            }
            let params = {
              id: random+'/'+item.sid,
              pId: key,
              value: random+'-'+item.sid,
              title: item.title,
              isLeaf: !item.open && item.type == '2',
              selectable: item.type != '1',
              disabled: item.type == '1',
            }
            arr.push(params)
          })
        }
        return arr
      })
      this.treeData = this.treeData.concat(arr)
    },

由于对数组的数据进行了出来如果选择框内原本就有数据查看页面详情时需要对数据进行回显和对机构列表进行 - '已选中状态高亮'所以要对数据进行处理

/* 编辑 - 详情  带队领导选择字段回显 */
    dealWithInitLeaders(v, random) {
      /* 回显 当接口返回的leaders的id 和 机构列表的id一致则同时修改表单leaders的id 和 列表的id */
      let index = this.resLeaders.findIndex( item => item.value == v.sid)
      if(index >= 0) {
        this.resLeaders[index].value = random + '-' + v.sid
      }
      if(index >= 0) {
        this.$nextTick( () => {
          this.form.setFieldsValue({ leadersStr: this.resLeaders})
        })
      }
    },

当然懒加载部分也要添加这样就能实现已选中的人员id和列表保持一致避免同一个人员可以选择多次的情况