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) {}

受啟發於：