elementui table tree使用懒加载功能后，不能使用过滤的解决方法

element-ui table 不能过滤的最主要的原因是可能大部分情况没这么个需求，但还是偶尔会碰到这种情况。

其实不是lazy懒加载的方式是加工一下data数据就好处理一些。懒加载那就有点坑了。

要解决的问题有以下几个点

1. 先选择了过滤之后（已经有过滤的状态下）加载child

2. 已经加载完child数据进行过滤

3. 父级，子集的过滤方法共用，保持一致性

4. 当选择所有的时候不触发的清除过滤的问题

template部分：

<el-table v-loading="loading" :data="dataList"  
  row-key="id"
  ref="financialStatementList"
  :load="getList" 
  lazy
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  @filter-change="onFilterChange"
>      
  <el-table-column label="编码" align="center" prop="code" />      
  <el-table-column label="名称" align="center" prop="user_name" >
    <template slot-scope="scope">{{scope.row.user_name}}</template>
  </el-table-column>      
  <el-table-column label="类型" align="center" prop="income_type"
            :filters="typeFilter"
            :filter-multiple="false"
            :filter-method="filterHandler"
            column-key="f_type"  />  
</el-table>

data部分：

data() {
  return {
    expandData: new Map(), //展开数据
    tableFilter: {},    //保存过滤状态
    incomeTypeFilter:[
      {text:'类型1',value:'1'},
      {text:'类型2',value:'2'},
    ],
  }
}

加载树形数据：

methods: {   
  // 加载树形结构数据
  getTeamList(tree, treeNode, resolve) {
    var params = {}
    api.getTree(params).then(response => {
      let child = response.data; 
      if (child) {
        // 将当前选中节点数据存储到map中
        this.expandData.set(tree.id, child)

        //首次加载时有过滤条件的话过滤处理
        var filterCnt = Object.keys(this.tableFilter);
        if(filterCnt.length > 0){
          child = this.filterTree(this.tableFilter)
        }
      }else{
        child = []
      }
      resolve(child);
    }).catch((err) => {
      resolve([]);
    });
    
  },
  // 当触发过滤的时候
  onFilterChange(filters){
    this.tableFilter = filters
    this.filterTree(filters)
  },
  //过滤树形结构数据
  filterTree(filters) {
    let childs = []
    for (const key in filters) {
      const filterValue = filters[key]
      this.expandData.forEach((_,parentId) => {  
        // 根据父级id取出对应节点数据
        childs = this.expandData.get(parentId)
        if(!childs){
          return
        }
        if(filterValue.length > 0){
          childs = childs.filter(row => this.filterHandler(filterValue,row))
          //myTable 要在el-table的ref属性里的保持一直
          this.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, parentId, childs)
        }else{
          this.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, parentId, childs)
        }
      });
    }
    return childs    //这里一定要得有，解学先选过滤后不能正常加载的问题
  },
  // 过滤类型
  filterHandler(value, row) {
    let isFillter
    /* 这里是按需求写过滤逻辑就行，入参需要用到column的话，要得自己动动手，大部分情况不需要所以没处理
    if(row.income_type == 'all'){
      isFillter = true
    }else{
      isFillter = row['income_type'] == value
    }
    */
    return isFillter;
  },
  // ...其他方法省略
}