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的名字
这样就可以实现分也时筛选了

    原文作者:哈哈哈
    原文地址: https://segmentfault.com/a/1190000019743884
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞