Element UI Tree组件的搜索、数据回显、懒加载

由于业务中使用的 ElementUi Tree 组件数据量比较大 需要采用懒加载模式 同时需要实现搜索以及数据双向回显功能

一开始尝试动态切换是否有Lazy属性 但是发现难以实现全部功能 于是干脆自己实现懒加载 这样可以兼顾回显和搜索

      <el-row>
        <el-input size="medium" @keyup="mySelect" style="margin-bottom: 15px;" placeholder="输入关键字进行过滤" v-model="filterText">
          <el-button slot="append" type="primary" icon="el-icon-search" @click="mySelect"></el-button>
        </el-input>
      </el-row>

      <el-tree
        :props="defaultProps"
        :data="treeData"
        show-checkbox
        node-key="id"
        :highlight-current="true" //高亮显示选中项
        :default-expanded-keys="defaultOpen" //默认打开
        :default-checked-keys="defaultChecked" //默认选中
        @node-click="nodeClick"
        ref="tree"
      ></el-tree>

data(){
    return{
        filterText: '',
        treeData: [],
        defaultProps: {
            label: 'species',
            children: 'chi