elementUi el-table 后端进行过滤筛选再重新选中过滤条件

<template>
  <el-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%"
    @filter-change="filterChange">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
      column-key="date"
      :filters="datafilter"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="tagfilter"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '家' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

 methods: {
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }
    }
  }

通过filterChanges事件，监听表格每列的筛选条件变化，再把筛选条件传给后端，后端进行数据过滤后返回数据，重新渲染表格

 filterChange(filters){
                //表格字段筛查
                this.datafilter = filters['datafilter'];
             if(this.datafilter != null && this.datafilter!="" && this.datafilter != undefined){
                   this.filterobj= this.filterobj.filter(item => item.column != 'data-filter');
                    this.filterobj.push({
                        column:"data-filter",
                        selections:this.datafilter
                    })

               //通过this.filterchose来判断过滤条件是勾选还是取消

                  this.filterchose.datafilter = this.datafilter;

                }else if(this.datafilter && this.datafilter.length==0){
                    this.filterobj = this.filterobj.filter(item => item.column != 'data-filter');
                  this.filterchose.datafilter = [];
                }


 me.service.ByKeyWord(this.filterobj).then(res => {
             this.tableData.splice(0,this.tableData.length);
           this.tableData = res.data;

 this.$nextTick(()=>{
                    //表格重新渲染，过滤状态也会重新渲染，需要手动对字段筛选重新勾选
                    this.$refs.rulestore.columns.forEach((val,ind)=>{
                    if(val.property=='datafilter' && this.filterchose.datafilter!=[]){
                        this.$refs.rulestore.columns[ind].filteredValue=me.data.filterchose.datafilter
                        }

                    })
})
               })

}