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 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
浅谈js中对象的使用
Aug 11 Javascript
jQuery文字轮播特效
Feb 12 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
vue仿element实现分页器效果
Sep 13 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 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图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
php自动获取关键字的方法
2015/01/06 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
tensorflow如何批量读取图片
2019/08/29 Python
浅谈Python 函数式编程
2020/06/20 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
食品安全处置方案
2014/06/14 职场文书
群教个人对照检查材料
2014/08/20 职场文书
少先队活动总结
2014/08/29 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
学生检讨书范文
2019/06/24 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android