element tree树形结构接口不支持搜索、懒加载情况下实现搜索

目前项目中，element tree树形结构由于数据太多使用了懒加载，并且接口不支持搜索，只能由前端实现搜索功能，暂时按照自己思路实现功能。

思路为：输入搜索内容后，直接遍历树形结构的数据，通过filter筛选出结果之后再赋值给树形结构。

demo中是三层树形结构的筛选

代码为：

template中：

        <el-input placeholder="输入关键字" v-model="filterText" style="width:100% !important;"> </el-input>
        <el-tree
          class="filter-tree"
          :data="channelList"
          :props="defaultProps"
          ref="tree"
          node-key="id"
          @node-click="handleNodeClick"
          lazy
          :load="loadNode"
        >

        </el-tree>

script中方法，使用watch监听输入内容，通过filter过滤数据将新数据赋值给tree

  data() {
	return {
	  channelListAll: [], // 所有channel
	  channelList: '', // 树展示的
	  filterText: '' // 搜索搜索字段
    };
  },
  watch: {
    filterText(val) {
      // 深拷贝一份数据，保留原始数据
      const channelListAll = JSON.parse(JSON.stringify(this.channelListAll));
      if (!val) {
        this.channelList = channelListAll;
        return;
      }
      // 针对树形结构搜索
      // 逐级过滤 把name包含搜索内容的过滤出来
      this.channelList = channelListAll.filter(company => {
        const companyChildren = company.children.filter(area => {
          const areaChildren = area.children.filter(group => {
            return group.name.indexOf(val) !== -1;
          });
          // 如果所有下级都不包含搜索内容就不需要显示下级的话 此处去掉if判断
          if (areaChildren.length != 0) {
            area.children = areaChildren;
          }
          return area.name.indexOf(val) !== -1 || areaChildren.length != 0;
        });
        // 下级搜索之后返回不为空，那就重新赋值，有可能已经被过滤过了，不直接返回是为了避免当前层级被搜索出来但是没下级
        // 如果所有下级都不包含搜索内容就不需要显示下级的话 此处去掉if判断
        if (companyChildren.length != 0) {
          company.children = companyChildren;
        }
        return company.name.indexOf(val) !== -1 || companyChildren.length != 0;
      });
    }
  },