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


Posted in Javascript onJuly 12, 2019

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript动态调整iframe高度的代码
Apr 10 Javascript
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
javascript 跳转代码集合
Dec 03 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
es6中比较有用的7个技巧小结
Jul 12 #Javascript
echarts大屏字体自适应的方法步骤
Jul 12 #Javascript
javascript实现简易聊天室
Jul 12 #Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 #Javascript
小程序实现短信登录倒计时
Jul 12 #Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 #Javascript
小程序实现分类页
Jul 12 #Javascript
You might like
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
php导入模块文件分享
2015/03/17 PHP
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
python中字典dict常用操作方法实例总结
2015/04/04 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
python模拟Django框架实例
2016/05/17 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
python模块常用用法实例详解
2019/10/17 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Python类super()及私有属性原理解析
2020/06/15 Python
Python识别处理照片中的条形码
2020/11/16 Python
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
简单叙述一下MYSQL的优化
2016/05/09 面试题
大学生社会实践方案
2014/05/11 职场文书
个人合伙协议书范本
2014/10/14 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
银行员工考核评语
2014/12/31 职场文书
2015年司机工作总结
2015/04/23 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书