elementUI的表格筛选功能总结(filter-method、filter-change)

用法举例:

<el-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%"
    @filter-change="filterChanged">
    <el-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'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
    <el-table-column
      prop="tag"
      label="标签"
      width="100"
      column-key="tag"
      <!--//fitlers绑定的筛选数组的对象的键值一定要是text和value -->
      :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
      :filter-method="filterTag"
      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>

js函数部分

filterChanged(filterCondition) {
    //filterCondition是一个对象，其key值为通过在el-table-column中设置的column-key属性，标志哪一个列的过滤条件，可用于区分哪一个列的筛选条件发生了改变。
    //filterChanged函数和filter-method属性一般而言使用一个，前者可自定义筛选条件，如需要重新查库，则比较适用，filter-method为el-table-column的属性函数，
    //其绑定的函数内部逻辑为：遍历表格绑定的数据，匹配表格每一行是否满足筛选条件，然后返回，所以上述示例中的filterTag、filterChanged函数其实会重复执行，不可在其内部调用后端接口，否则会发生调用死循环。
  if (filterCondition.date) {
    this.query.date = filterCondition.date[0] //修改查询条件
    this.queryData(this.query) //发送http请求，查找新数据
},
filterTag(value, row) {
    return row.tag === value;
},
filterHandler(value, row, column) {
    const property = column['property'];
    return row[property] === value;
}