element-ui 的el-tree控件动态加载更新

element-ui官方文档（官方文档）提供了懒加载自定义叶子节点，主要是通过resolve()来返回。

使用:

1. 页面上先引入element ui相关js和css.
2. el-tree基础用法：

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

<script>
  export default {
   
    data() {
   
      return {
   
        data: [{
   
          label: '一级 1',
          children: [{
   
            label: '二级 1-1',
            children: [{
   
              label: '三级 1-1-1'
            }]
          }]
        }, {
   
          label: '一级 2',
          children: [{
   
            label: '二级 2-1',
            children: [{
   
              label: '三级 2-1-1'
            }]
          }, {
   
            label: '二级 2-2',
            children: [{
   
              label: '三级 2-2-1'
            }]
          }]
        }, {
   
          label: '一级 3',
          children: [{
   
            label: '二级 3-1',
            children: [{
   
              label: '三级 3-1-1'
            }]
          }, {
   
            label: '二级 3-2',
            children: [{
   
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
   
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
   
      handleNodeClick(data) {
   
        console.log(data);
      }
    }
  };
</script>

对于数据不多的情况下可以后台直接组装这种格式返回，但由于我这边的物资编码数据量较大（六千多条），如果全部一次性返回会导致页面渲染时速度缓慢，影响体验。所以这边采用动态加载的方式实现，初始时只查询一级节点，之后每点击一次传此节点的id去查询它下面的节点。

3. 实际应用

引入el-tree组件：设置相关属性

<!-- 搜索与筛选 -->
    <div class="mysearch">
      <div class="search-header row">
        <div class="col-12 myfrom row">
          <input type="search" placeholder="搜索物资设备服务编码/物资名称" class="col-10" v-model="searchParam">
          <i 
          v-show="circle"
          class