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静态的动态
Sep 18 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
js查找节点的方法小结
Jan 13 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
理解Javascript的call、apply
Dec 16 Javascript
原生js的数组除重复简单实例
May 24 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
使用JS模拟锚点跳转的实例
Feb 01 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
js返回顶部实例分享
2016/12/21 Javascript
常用的javascript设计模式
2017/01/11 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python使用minimax算法实现五子棋
2019/07/29 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
韩国现代百货官网:Hmall
2018/03/21 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
期中考试复习计划
2015/01/19 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
跳高加油稿
2015/07/21 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫