iview的table组件自带的过滤器实现

前端  /  管理员 发布于 5年前   1159

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的名字

这样就可以实现分也时筛选了

 

 以上就是本文的全部内容，

希望对大家的学习有所帮助，

也希望大家多多支持。