Element ui 表格筛选

Element ui 表格筛选，如下：只能筛选当前页，不能对所有数据进行筛选

image.png

这时咋办呢，其实Element ui 表格有一个事件，filter-change

当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。
注意：这个事件必须添加到table上，column-key属性需要添加在el-table-column上
看代码：

<el-button type="primary" @click="search(isCredit)">查询</el-button>
<el-table :data="tableData" size="small" @filter-change="search">
      <el-table-column label="交易时间">
        <template slot-scope="scope">{{scope.row.created||'-'}}</template>
      </el-table-column>
      <el-table-column
        prop="is_credit"
        label="筛选依据"
        :filters="[ { text: '已完成', value: 1 }, { text:'未完成', value: 0 }]"
        column-key="is_credit"
        :filter-multiple="false"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.is_credit==1">已完成</span>
          <span v-if="scope.row.is_credit==0">未完成</span>
        </template>
      </el-table-column>
</el-table>


<script>
export default {
    methods:{
        search(val) {
          // 这里可以写请求后台的方法，通过请求后台，展示对应数据
           console.log('筛选依据',val['is_credit'])
        }
    }
}
</script>