el-tree数据懒加载渲染

实现以上效果：

因为后台数据是不带 children嵌套数组方式的数据，所以根据 id来获取子集数据来渲染，要遵守element官方的数据格式

data: [
       { id: 1,label: '芷江侗族自治县',
          children: [
            { label: '公坪镇',children: [{ label: '公坪村' }] },
            { label: '三道坑镇',children: [{ label: '五郎溪乡' }, { label: '木叶溪乡' }] }
          ]
       }
]

获取到的数据格式如下：

上代码：

<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 class="card-right">
      <el-card>
        <el-main style="height: 910px"> 右侧内容 </el-main>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
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>

碰到的一些小问题：

/** 去除侧边栏展开折叠出现的x和y轴的滚动条 */
.el-aside::-webkit-scrollbar {
  display: none;
}

通过控制isCollapse的boolean值来决定是否侧边栏伸展
<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-aside>

:collspae="isCollapse" (官方属性写法)

/** 树结构懒加载问题 */
el-tree标签上这两个搭配使用才能生效
lazy
:load="loadNode"
主要用到的请求到的数据搭配 resolve使用
loadNode(node, resolve) {}

受启发于：