el-tree懒加载数据

需求：弹层树的数据 默认来源 取自车型的第一个数据；默认展示树第一节点的值，后续弹层按照懒加载形式点击节点展开

代码实现如下：

      <el-tree
        v-if="ibshow"
        ref="refTree"
        v-loading="list.loading"
        :props="props"
        :load="loadNode"
        lazy
        node-key="id"
        :default-expanded-keys="showList"
        :expand-on-click-node="false"
        class="treeClass"
        show-checkbox
        @node-click="handleClickTree"
      />

<script>
export default {
 data() {
    return {
   props: {
        children: 'children',
        label: 'sys_name_chn',
        isLeaf: 'isLeaf',
        disabled: 'disabled', // 是否禁用
        level: 'level',
        seq_type: 'seq_type' // 判断是否为分装序
      },
      list: {
        loading: false,
        isExpand: false
      },
      currentTreeNode: '', // 选中树的id
      showList: [],
      level0Node: {},
      level0Resolve: {},
      treeNode: {}
        }
    }
}
<script>

tags 返回的数据，按照自己需要自行补充 

    // 左侧树懒加载
    async loadNode(node, resolve) {
      // 懒加载
      if (this.carModelCode) {
        if (node.level === 0) {
          setTimeout(() => {
            this.currentTreeNode = 'root'
            // this.setTreeCurrentNode()
            this.showList.push('root')
          })
          this.level0Node = node // 这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
          this.level0Resolve = resolve // 同上，把node.level == 0的resolve也存起来
          return resolve([{ id: 'root', pid: '0', part_name: '参与车型', sys_name_chn: this.carModelCode, children: [], disabled: true, level: node.level }])
        } else if (node.level === 1) {
//第一层和第二层调用的接口不同 其他都是一样的
          return resolve(await this.getSysByModel(this.searchData.vehicleModelCode))
        } else if (node.level === 2) {
          // 传序的id
          return resolve(await this.querySequenceBySystem(node.data.id))
        } else if (node.level === 3 || node.level === 4) {
//这里是层级为3的数据，后端返回的在第二层的时候直接给到children里面的
          let tags = []
          node.data.children.forEach((item, index) => {
            tags = [...tags, { sys_name_chn: item.seq_name_chn, id: item.id, isLeaf: item.is_seq_parent !== 'true', children: item?.children, disabled: false, level: node.level, seq_type: item.seq_type }]
          })
          return resolve(tags)
        } else {
          return resolve([])
        }
      }
      // setTimeout(() => {
      //   console.log(this.$refs.refTree, 'tree')
      // }, 2000)
    },

//接口处理，这里我就只写一个 仅供参考
    getSysByModel(item) {
      if (item !== '') {
        return new Promise((resolve) => {
          getSysByModel({ modelId: item }).then((res) => {
            if (res && res.rows && res.rows.length > 0) {
              let tags = []
              res.rows.forEach((item, index) => {
//isLeaf判断 指定节点是否为叶子节点
                tags = [...tags, { sys_name_chn: item.sys_name_chn, id: item.id, isLeaf: item.is_seq_parent !== 'true', disabled: false, level: 1 }]
              })
              this.list.loading = false
              return resolve(tags)
            } else {
              this.list.loading = false
              return resolve([])
            }
          })
        })
      }
    },