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

实现效果

思维导图 

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

1.  
   <a-tree-select
2.  
   style="width: 100%; margin-left: 20px"
3.  
   tree-data-simple-mode
4.  
   multiple
5.  
   labelInValue
6.  
   placeholder="请选择…"
7.  
   v-decorator="['leadersStr', { rules: [{ required: true, message: '请选择…' }] }]"
8.  
   :tree-data="treeData"
9.  
   :disabled="readOnly"
10.  
    :load-data="onLoadData"
11.  
    />

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

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

注： 这里兼顾到两种情况：

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

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

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

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

1.  
   /* 获取带队领导姓名列表 */
2.  
   async getLaderOrg(orgId = '111111111') {
3.  
   let res = await findLeaderForOrg(orgId)
4.  
   if(res.success && res.body.length > 0) {
5.  
   this.treeData = res.body.map( v => {
6.  
   const random = Math.random().toString(36).substring(2, 6);
7.  
   /* 如果是人员，匹配接口数据，是否有已选中 */
8.  
   if(v.type == '2') {
9.  
   this.dealWithInitLeaders(v, random)
10.  
    }
11.  
    return {
12.  
    id: random '/' v.sid,
13.  
    pId: null,
14.  
    value: random '-' v.sid,
15.  
    title: v.title,
16.  
    selectable: v.type == '2',
17.  
    isLeaf: !v.open && v.type == '2',
18.  
    disabled: v.type == '1'
19.  
    }
20.  
    })
21.  
    }
22.  
    },

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

1.  
   /* 领导带队检查懒加载 */
2.  
   async onLoadData(treeNode) {
3.  
   return new Promise(resolve => {
4.  
   const { value, isLeaf } = treeNode
5.  
   this.genTreeNode(value, isLeaf)
6.  
   resolve()
7.  
   });
8.  
   },
9.  
    
10.  
    // 树加载
11.  
    async genTreeNode(key, isLeaf = false) {
12.  
    var arr = []
13.  
    /* key是拼接后的数据，需要还原回接口返回的形势，截断一下 */
14.  
    await findLeaderForOrg(key.split('/')[1]).then( res => {
15.  
    if(res.success && res.body.length > 0 ) {
16.  
    res.body.map( item => {
17.  
    const random = Math.random().toString(36).substring(2, 6);
18.  
    /* 回显 */
19.  
    if(item.type == '2') {
20.  
    this.dealWithInitLeaders(item, random)
21.  
    }
22.  
    let params = {
23.  
    id: random '/' item.sid,
24.  
    pId: key,
25.  
    value: random '-' item.sid,
26.  
    title: item.title,
27.  
    isLeaf: !item.open && item.type == '2',
28.  
    selectable: item.type != '1',
29.  
    disabled: item.type == '1',
30.  
    }
31.  
    arr.push(params)
32.  
    })
33.  
    }
34.  
    return arr
35.  
    })
36.  
    this.treeData = this.treeData.concat(arr)
37.  
    },

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

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

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

这篇好文章是转载于：学新通技术网