今天开发遇到一个问题，前台通过table展现了数据，并且实现分页，现在有一个需求，就是通过某一列可过滤数据，实现效果如下：

网上查了很多资料及官网的示例，讲的都是过滤已经展现出来的数据，现在我需要通过过滤条件将后台的数据也展现出来，直接上代码：

HTML代码

<el-table    ref="filterTable"    :data="tableData"    @filter-change="filterChangeHandler"    style="width: 100%">    <el-table-column      prop="status"      label="状态"      sortable      width="180"      column-key="status"      :filters="[{text: '删除', value: '0'}, {text: '禁用', value: '1'}, {text: '正常', value: '2'}]"    >    </el-table-column>    <el-table-column      prop="name"      label="姓名"      width="180">    </el-table-column>    <el-table-column      prop="address"      label="地址"      :formatter="formatter">    </el-table-column>  </el-table>

JS代码

export default {    data() {      return {        tableData: []      }    },    methods: {      filterChangeHandler(filters){//filters是一个对象，对象的key就是column-key指定的名称        console.log(filters.status)//可获得过滤的条件        //接下来你就可以通过过滤条件向后台请求获取数据了，通过axios等，然后将值赋予tableData        //这里的请求是经过封装的        getDataByStatus({					status: filters.status,					limit: this.pagesize,					page: this.curPage				}).then((res) => {					this.tableData = res.data.list					this.pageTotals = res.data.totalRow				}).catch(() => {				})      }    }}

filter-change参数的详细说明：