el-tree懒加载

做项目时候,需要异步获取大量数据,采用el-tree树形控件懒加载

               <el-tree
                v-show="ishowTree"  // 控制树形组件的显示与隐藏
                ref="tree"
                v-clickoutside="treeClose"  // 自定义指令 点击树形组件以外的地方隐藏组件
                lazy               // 是否懒加载子节点，需与 load 方法结合使用
                :load="loadNode"   // 加载子树数据的方法，仅当 lazy 属性为true 时生效
                :props="defaultProps"  // 配置选项
                :data="knowledgeDatas" // 展示数据
                class="myTree ORGTree"
                show-checkbox      // 节点是否可被选择
                node-key="id"      // 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
                :check-strictly="true"  // 在显示复选框的情况下，是否严格的遵循父子不互相关联的 
                                        // 做法，默认为 false
                highlight-current       // 是否高亮当前选中节点
                :check-on-click-node="true"  // 是否在点击节点的时候选中节点
                :default-checked-keys="form.checkedKeys" // 默认勾选的节点的 key 的数组
                style="width: 500px"
                @check-change="handleCheckChange"  // 节点选中状态发生变化时的回调
              ></el-tree>

1.首先调接口获取到父层级里面中的data数据

getKnowledgePointTreeOneFn(params) {
      getKnowledgePointTreeOne(params).then(res => {
        // // console.log.log(499, '顶级父元素', res)
        let resArr = []
        if (res.datas) {
          res.datas.forEach(item => {
            resArr.push({
              name: item.name,
              id: item.id,
              children: item.children,
              leaf: item.childNum == 0,
              subjectId: item.subjectId,
            })
          })
          // console.log.log(858, res)
          this.$nextTick(_ => {
            this.knowledgeDatas = resArr
          })
        }
      })
    },

2.配合懒加载lazy使用的load获取到子层级里面的数据,获取到子层级里面的数据,将子层级的数据设置到其父节点的数据下,形成懒加载的效果

// 配合lazy使用的load 
    async loadNode(node, resolve) {
      // // console.log.log(554, node, resolve)
      let that = this
      // 第一层的数据
      if (node.level == 0) {
        // 将父级数据放到 resolve中
        return resolve(that.knowledgeDatas)
      }
      // 子节点之后的数据
      if (node.level >= 1) {
        // 拿到参数
        const params = {
          subjectId: that.subjectId,
          parentId: node.data.id,
        }
        // 发请求 拿到子节点的数据
        let res = await getKnowledgePointTreeOne(params)
        let resArr = []
        res.datas.forEach(item => {
          resArr.push({
            name: item.name,
            id: item.id,
            children: item.children,
            leaf: item.childNum == 0,
            subjectId: item.subjectId,
          })
        })
        // 将拿到的数据 使用updateKeyChildren的方法设置给其父节点
        that.$refs.tree.updateKeyChildren(node.data.id, resArr)
        // 将数据丢进 resolve
        resolve(resArr)
      }
    },

3.在选中节点的回调里面进行相应的业务逻辑处理

  // 按照知识体系--- 知识点change发生变化
    async handleCheckChange(row) {
      const resData = this.$refs['tree'].getCheckedNodes()
      // // console.log.log(645, resData)
      let arrLabel = []
      let arr = []
      resData.forEach(item => {
        arrLabel.push(item.name)
        arr.push(item)
      })
      this.form.questionKnowPointKey = arrLabel.join('、')
      this.knowledgeIds = this.$refs['tree'].getCheckedKeys()
      // // console.log.log(654,this.knowledgeIds);
      if (this.knowledgeIds.length) {
        let params = {
          bookNodeIds: null,
          subjectId: parseInt(this.subjectId),
          knowledgeIds: this.knowledgeIds,
          // questionMinutes: null,
          // // Number(this.form.time) == 0 ? '' : Number(this.form.time),
        }
        if (this.form.testPoint) {
          // 选择了考点
          params = {
            ...params,
            stickyNotes: {
              考点: this.form.testPoint.split('、'),
            },
          }
        }
        // // console.log.log('获取题目数量的参数', params)
        this.getQuestionBookNodeNumFn(params)
      } else {
        // console.log.log(662, '没有获取知识点')
        this.form.topic = []
        this.$set(this.form, 'topic', [])
        this.form.choose = ''
      }
    },