共计 499 个字符,预计需要花费 2 分钟才能阅读完成。
iview 框架的 table 组件自带的过滤器的使用方法:
<script> | |
export default {data () { | |
return { | |
columns: [ | |
{ | |
title: 'Name', | |
key: 'name' | |
}, | |
// 过滤器 | |
// 通过给 columns 数据的项,设置 filters,可进行筛选,filters 接收一个数组,必须指定一个筛选函数 filterMethod | |
{ | |
title: 'Age', | |
key: 'age', | |
filters: [ | |
{ | |
label: 'Greater than 25', | |
value: 1 | |
}, | |
{ | |
label: 'Less than 25', | |
value: 2 | |
} | |
], | |
filterMultiple: false, | |
filterMethod (value, row) {if (value === 1) {return row.age > 25;} else if (value === 2) {return row.age < 25;} | |
} | |
} | |
] | |
} | |
} | |
} | |
上面的方法是 iview 的 demo,但是这样不能实现分页时筛选,只能筛选当前页,想要实现分页筛选,只需在 filterMethod 函数的第一行加上一段
this.age = value // age 变量为 key 的名字
这样就可以实现分也时筛选了
正文完