封装element懒加载树形控件

页面如下：

接口返回的数据：

1.根据ChildrenNum的数值判断下面有几个子节点，是否显示展开图标
2.传FItemID给接口

代码如下：

<template>
<!-- expand-on-click-node为false只有点图标才会展开收缩节点;
accordion每次只打开一个同级树节点 -->
  <el-tree 
  accordion
  :props="props" 
  :expand-on-click-node="false"
  highlight-current
  @node-click="nodeClick" 
  :filter-node-method="filterNode"
  :load="loadNode" 
  lazy />
</template>
<script lang="ts" setup>
import { ref, watch, getCurrentInstance } from 'vue'
import type { ElTree } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import SysApi from '/@/api/sys/index';
interface Tree {
  FName: string
}
const { proxy } = getCurrentInstance() as any;
const props = {
  label: 'FName',
  children: 'zones',
  isLeaf: (data, node) => { return node.data.ChildrenNum == 0 },//懒加载时判断展开是否有节点有就加上节点图标
}
let idKey:Number=0
// 懒加载
const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
  idKey = node.data.FItemID ?node.data.FItemID:0
  GetBomWorkChk(resolve)
}
// 获取下一节点数据
const GetBomWorkChk=async (resolve: (data: Tree[]) => void)=>{
let param = {
	id:idKey
}
  await SysApi.GetSelectFormData(param)//调用接口
    .then((rs) => {
      if (rs.code == 0) {
        if (rs.data && rs.data.length > 0) {
        const data: Tree[] = rs.data//赋值节点数据
        resolve(data)
        }
      }
  })
}
// 点击节点
const nodeClick=(node,data) => {
  proxy.mittBus.emit('changeNodeID',node.FItemID)//用$emit传值，用$on接收
}
</script>
<style>
.el-tree-node__content>.el-tree-node__expand-icon{
  padding: 0;
}
.el-tree-node__expand-icon{
  font-size:25px;
}
</style>