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

最新推荐文章于 2024-06-28 14:51:14 发布

Bessie cheng

最新推荐文章于 2024-06-28 14:51:14 发布

阅读量2.8k

点赞数

文章标签：前端 javascript html anti-design-vue

本文链接：https://blog.csdn.net/Laladoge/article/details/128828533

版权

该文章描述了在前端开发中如何处理树形结构数据，特别是涉及到懒加载、数据组装以及保持数据唯一性的问题。在HTML中使用组件，通过JavaScript和异步接口获取并处理数据，确保叶子节点的正确显示和已选中项的回显一致性。

摘要由CSDN通过智能技术生成

实现效果

思维导图

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和列表保持一致，避免同一个人员可以选择多次的情况