element table 过滤器_element UI table 过滤 筛选问题

一、问提描述

使用elementUI table 官方筛选案例，发现筛选不是服务器端筛选，而是浏览器端对每一页进行单独筛选。 如何在服务器端筛选？

二、查询Element UI 官网table组件发现：

1、Afilter-change事件，说明：当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。参数：filters。

2、 prop属性，说明：对应列内容的字段名，也可以使用 property 属性。类型 string

3、filters属性，说明：数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。类型 Array[{test,value}]

4、column-key属性，说明：column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件  类型：string

三、用法描述

1.在 el-table 标签 @filter-change="handleFilterChange" ，

2. 在vue周期函数methods: {}中实现

handleFilterChange 方法：可以监听整个table中过滤条件变化； --这个事件非常重要，这里它还充当了与服务器进行数据交互的入口。这是过滤方法不能提供的，因为过滤方法逐行执行，执行次数太多。

setFilter方法：按照服