element ui表格打印_Element-ui中的表格筛选

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

image.png

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

prop="tag"

align='center'

column-key="tag"

:filter-method="filterTag"

:filters="[{ text: '男', value: '男' }, { text: '女', value: '女' }, { text: '未知', value: '未知' }]">

//filters每一个数组项有text和value两个属性

//下面是filterTag方法

filterTag(value, row) { // 一般用两个参数就可以，分别是filters筛选出来的value和每一行row

retrun row.tag === value // 把具体哪个字段跟筛选的值去比较，然后返回

}

这样就完成了表格筛选，但超人鸭肯定不会讲这么一点东西。

其实这种表格筛选更适合本地开发，因为如果是真正开发，表格基本都是跟分页器一起的，就是说真实项目的表格数据