Element-ui中的表格筛选

element-ui中的表格组件有一个筛选功能:

image.png

实现方法就是在el-table-column上绑定上filters属性，是个数组,再去监听筛选触发的方法filter-method,这个方法会传入三个参数：value, row 和 column,具体看下面的代码:

<el-table-column label="标签"
                 prop="tag"
                 align='center'
                 column-key="tag"
                 :filter-method="filterTag"
                 :filters="[{ text: '男', value: '男' }, { text: '女', value: '女' }, { text: '未知', value: '未知' }]">
</el-table-column>
//filters每一个数组项有text和value两个属性
//下面是filterTag方法
filterTag(value, row) {   // 一般用两个参数就可以，分别是filters筛选出来的value和每一行row
  retrun row.tag === value  // 把具体哪个字段跟筛选的值去比较，然后返回
}

这样就完成了表格筛选，但超人鸭肯定不会讲这么一点东西。
其实这种表格筛选更适合本地开发，因为如果是真正开发，表格基本都是跟分页器一起的，就是说真实项目的表格数据获取只会获取某一页的数据，然后点击下一页再重新获取另一页的数据。所以点了筛选后只会对当前数据进行筛选，如果换页了就失去效果了。
在真实开发过程中，这个筛选功能一般是在调用接口的时候传入参数，然后由后端那边去查询返回数据。那么刚好在监听的filter-method事件中，可以获取到筛选的值，那如果在监听的filter-method事件中调用接口会顺利吗?

filterTag(value, row) { 
  //调用接口的语句
  retrun row.tag === value
}

看一下官方的文档:

filter-method:数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。

什么意思?遇事不决，console.log!

filterTag(value, row) { 
  console.log(value)   // 随便打印一点东西
  retrun row.tag === value
}

image.png

每次筛选都会打印出很多条数据，表格有多少数据就会打印多少次，我也是看到这才明白，filter-method是去遍历每一行数据，进行筛选，也就是方法里面的操作会执行很多次，如果去调用接口的话会一时间发起很多请求，如果数据量大的话，很容易崩掉。
超人鸭继续翻了官方文档，发现下面这个方法:

filter-change: 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组

很明显，这个事件是当筛选条件发生变化时才会触发，也就是说每次筛选只会执行一次，正满足我们的需求。这个事件是绑定在表格上的:

<el-table @filter-change="filterChange">
</el-table>

//在methods里
filterChange (filterObj) { 
  console.log(filterObj)
}

按官方文档说的，参数是一个对象，对象的key是column 的 columnKey，我们在上面也在设置了el-table-column里设置了column-key="tag"，那当筛选条件改变后，例如我选了'男'、'女',该事件触发的参数是什么呢，遇事不决，console.log:

image.png