iview的table组件自带的过滤器实现
时间:2021-02-04 11:33:05|栏目:vue|点击: 次
iview的table组件自带的过滤器实现
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的名字
这样就可以实现分也时筛选了