el-tree懒加载

参考链接:https://www.jianshu.com/p/3406341b2e15

<!--
 * @Author: 吴志伟
 * @Date: 2022-06-20 16:49:15
 * @LastEditors: 吴志伟
 * @LastEditTime: 2022-06-21 11:30:20
 * @Description: file content
 * @FilePath: \base-framework测试用的\src\views\tree\index.vue
-->
<template>
  <div class="home-card">
    <div class="card-left">
      <el-card>
        <el-aside style="height: 910px" :width="isCollapse ? '10px' : '230px'">
          <span v-if="!isCollapse" class="nav">导航</span>
          <i class="el-icon-arrow-left icon" @click="toggleCollapse()"></i>
          <el-menu class="el-menu-vertical-demo menu">
              
     <!--默认展开 拿到的 areaPlaceId值为字符串，:default-expanded-keys="['532822']数组中也要是字符串 -->
            <el-tree
              node-key="areaPlaceId"
              :default-expanded-keys="['532822']"
              accordion
              class="tree"
              :data="data"
              highlight-current
              lazy
              :load="loadNode"
              :props="defaultProps"
              @node-click="handleNodeClick"
            >
            </el-tree>
          </el-menu>
        </el-aside>
      </el-card>
    </div>
    
  </div>
</template>
<script>

export default {
  data() {
    return {
      //  控制侧边栏 false为折叠, true为展开
      isCollapse: false,
      data: [],
      defaultProps: {
        childre: 'childre', // 这里因为拿到数据没有children、所以可有可无
        label: 'areaName',   // 指定树结构的label值，后面的值都为拿到数据里有的值
        isLeaf: 'hasChild',  // isleaf决定是否为有子节点
      },
      url: {
        getChildListBatch: 'maintain/administrativeDivision/getChildListBatch',
      },
    }
  },
  methods: {
  // 加载 树数据、loadNode()方法、此函数函数接收两个参数，一个是node,即当前节点，一个是resolve作为数据处理函数
    loadNode(node, resolve) {
      if (node.level === 0) {
        return this.getList(resolve)
      }
      if (node.level >= 1) {
        return this.getChildList(node, resolve)
      }
    },
    //获取树结构 父集数据
    async getList(resolve) {
      const { result: res } = await getAction(this.url.getChildListBatch, { parentIds: 0 })
      //将hasChild转换成boolean、对应data中的 isLeaf值
      res.records.forEach((item) => {
        item.hasChild == 1 ? (item.hasChild = false) : (item.hasChild = true)
      })
      resolve(res.records)
    },
    //获取树结构 子集数据
    async getChildList(node, resolve) {
    const { result: res } = await getAction(this.url.getChildListBatch, { parentIds: node.data.id })
      res.records.forEach((item) => {
        item.hasChild == 1 ? (item.hasChild = false) : (item.hasChild = true)
      })
      resolve(res.records)
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
      console.log(this.isCollapse)
    },
    //选中树节点 (暂时没什么用)
    handleNodeClick(data) {
      console.log('点击选中的数据', data)
    },
  },
}
</script>

编辑回显问题:https://blog.csdn.net/qq_30351747/article/details/123640964