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 相关文章推荐
文字幻灯片
Jun 26 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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 将excel导入mysql
2009/11/09 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP Cookie学习笔记
2016/08/23 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
document.all与WEB标准
2020/05/13 Javascript
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
vue-cli中的webpack配置详解
2017/09/25 Javascript
vue实现拖拽效果
2019/12/23 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
幼师自荐信范文
2013/10/06 职场文书
实习指导老师评语
2014/04/26 职场文书
无私奉献演讲稿
2014/09/04 职场文书
认错检讨书
2014/10/02 职场文书
教师节标语大全
2014/10/07 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
护士求职简历自我评价
2015/03/10 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
小学班主任心得体会
2016/01/07 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书