vue用elementUI的Table做服务器端筛选

table自带的筛选功能是做已有数据的筛选，如果做了分页，就是在当前页做筛选，数据量大的时候显然不合适，下面介绍一下怎么做服务器端筛选

 

1，首先table本身带有一个事件@filter-change（这个事件是触发筛选的时候的事件处理）

<el-table :data="peopleInfo" ref="filterTable" @filter-change="filterChange">

filterChange的参数是filters，filters是选择的筛选的条件

2，之后在要筛选的那一列定义筛选属性

<el-table-column prop="sex" label="性别" :filters="sexFilter" column-key="sex"> </el-table-column>

（1）filters属性是筛选的条件集合

（2）column-key属性要和prop保持一致，不然filterChange的键值就是随机的列属性

3，进行服务器端筛选

（1）在data中定义一个filters，用来保存搜所有的筛选属性

（2）每次触发filterChange都把属性保存到filters中

（3）把filters做为参数上传到服务器进行筛选