element-ui 表格的表头自定义筛选方法

需求：表格的表头可以筛选

element-ui 自带了方法可以筛选，筛选的原理是将不满足条件的隐藏了
element-ui 自带的方法：在列中设置filters、filter-method属性即可开启该列的筛选，
filters 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。

   <co-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
      column-key="date"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}]"
      :filter-method="filterHandler"
    >
    </co-table-column>
    // method
     filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }

但是我想要重新接口获取数据，所以这个方法不行，最终的解决方案就是将其与filter-change事件（该事件是写在el-table里面的）结合

使用了element的插槽，将表头的样式加了一个下拉筛选的图表

//  html
<el-table @filter-change="filterChange" :data="dataList" >
<el-table-column
	label="名字"
    prop="name"
    :filter-multiple="false"  
    :column-key="'name'"
    :filters="filterArr"
 > 
       // 修改了表头的样式 加了一个筛选图标
     <template slot="header" slot-scope="{column}">
          <co-tooltip placement="top">
            <div slot="content">方法</div>
            <span>{{ column.label }}<i class="co-icon-filter" /></span>
          </co-tooltip>
      </template>
 // filter-multiple 下拉筛选的单选还是多选
 // column-key 给这一列标记一个名字
 // filters 下拉的列表
 </el-table-column>
</el-table >

// data
dataList:[]
filterArr: [{text: '下拉1', value: '下拉1'}, {text: '下拉2', value: '下拉2'}],

// method
filterChange(filters){
   // 判断是哪一列筛选
   if(filters.name){
     赋值这一列绑定的值
     this.dataList.name= filters.name[0]
   }
   this.getTableList(); // 通过接口获取数据的方法
},