element-ui table 表头filter 使用实现重新向后台获取数据

描述：当我们在使用element-ui的时候，常常用到表格，有表格就会有筛选。
这个时候往往会在表格上方使用筛选机的方式来实现筛选

像这样，但是一旦筛选条件增多，这个筛选机就会越来越长。这一点都不酷。

所以这边使用element提供的filters功能。

看了一下往上都说只能对已经有的数据进行筛选，不能后台筛选。

？？？不分页的数据到无所谓，我一个分页的数据，一页10条，难不成前端筛选第一页显示3条，第二页显示5条？？

excuse me？

上代码

<template>
  <el-table
    ref="filterTable"
    :data="tableData"
    @filter-change="fnFilterChangeInit"
    style="width: 100%">
    <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="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
      :filter-method="filterTag"
      column-key="tag"
      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>

<script>
  export default {
    data() {
      return {
        tableData: [],
        options:{
            tag: undefined
        }
      }
    },
    methods: {
      // 这里使用一个init的方法来模拟异步获取数据懂这个意思就好
      // 假装接受options作为筛选条件
      init(options){
        this.tableData = [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          tag: '家'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          tag: '公司'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          tag: '家'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: '公司'
        }]
      },
      // table column 的方法，改写这个方法
      filterTag(value, row, column) {
        return true
      },
      // table 的方法
      // filter 的格式  obj { column-key: Array }
      // Array[0] 筛选的值 
      fnFilterChangeInit(filter){
          // do something
          // example 这里最好用if，没有if可以试试也许有奇迹
          if(filter.tag){
            // 为什么这么处理 怕有些同学把undefined当一个字符串传给后台
            this.options.tag = filter.tag[0] == undefined ? '':filter.tag[0]
          }
          this.init(this.options)
      }
    }
  }
</script>