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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Iview Table组件中各种组件扩展的使用

    一.Iview Table 组件 多选框选中和禁选设置 Table添加多选框 通过给 columns 数据设置一项,指定  type: 'selection' ,即可自动开启多选功能. 正确使用好以下事件,可以达到需要的效果: @on-select ,选中某一项触发,返回值为  selection  和  row ,分别为已选项和刚选择的项. @on-select-all ,点击全选时触发,返回值为  selection ,已选项. @on-selection-change ,只要选中项发生变化

  • 浅谈vue的iview列表table render函数设置DOM属性值的方法

    如下所示: { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:params.row.leaderIdNumber }}) } }, 找了好多,终于找到了原因,如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps就ok了. 以上这篇浅谈vue的iview列表table render函数设置DOM属

  • 在uiview 的tableView中点击cell进入跳转到另一个界面的实现方法

    1.先重写uiviewcontrol的方法 - (UIViewController *)viewController { for (UIView* next = [self superview]; next; next = next.superview) { UIResponder *nextResponder = [next nextResponder]; if ([nextResponder isKindOfClass:[UIViewController class]]) { return

  • iview table render集成switch开关的实例

    今天想要分享的是iview table render集成switch开关修改table表格的值,看文档记得看2.0的,不注意打开就成1.0然后用上了一直没有效果又没有找出原因.给出的只是一种写法思路,具体自己集成. 一.效果如下 即是打开处理switch开关,对应修改为已处理状态,关闭switch开关,修改为未处理状态. 二.template html写法 <span style="font-size:14px;"><Table highlight-row borde

  • iview table高度动态设置方法

    在使用iview table表格组件的时候,由于我的屏幕分辨率比较大,在自己pc机上设置的固定高度很适合,在测试(test)时候发现在别的终端如1368*768的机器上都显示不全,下面就把我的和其他机器上效果图做个对比,如图所示: 一.我的机器 二.别人的机器 三.解决办法 原因就是因为表格高度是固定的,在大分辨率下的屏幕可以显示,小分辨率的屏幕就显示不完全,所以我们需要动态的去设置表格的高度,设置方法如下: 1.iview table的写法: <Table highlight-row bord

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

    iview的table组件自带的过滤器实现 iview框架的table组件自带的过滤器的使用方法: <script> export default { data () { return { columns: [ { title: 'Name', key: 'name' }, //过滤器 //通过给 columns 数据的项,设置 filters,可进行筛选,filters 接收一个数组,必须指定一个筛选函数filterMethod { title: 'Age', key: 'age', fil

  • vue iview 隐藏Table组件里的某一列操作

    1.假设我要隐藏columns里的 "账户组名称" columns: [ { type: 'selection', width: 60, align: 'center' }, { title: '账号ID', key: 'accountIdString' }, { title: '账号名称', key: 'accountName' }, { title: '账户组名称', key: 'accountGroupName' }] 2.根据各自需求去判断 示例:如果是单账户表标题显示&quo

  • 解决iView Table组件宽度只变大不变小的问题

    示例: <Table class="my-table"></Table> 打开开发者工具其实你可以发现iView给table标签的宽度加上了一个明确的宽度值,而且在父元素变小的时候这个值并没有相应地变小,所以才会导致的iView Table组件只会变大不会变小. 那么我们就可以根据这个原因才决定解决方案 1.给Table组件的table标签设置一个important的width .my-table table { width: 100% !important;

  • 解决iview table组件里的 固定列 表格不自适应的问题

    解决iview table组件里的 固定列 表格不自适应的问题

    当在使用iview Table组件里固定列功能时 出现表格不自适应宽度问题 具体如下 解决这个bug 很简单 把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'left', minWidth: 150 }, { title: '订阅名称', key: 'subscriptionName', minWidth:140 }, { title: '订阅ID', key: 'subscrip

  • vue iView 上传组件之手动上传功能

    基于 Vue 的 UI 组件库现在已经有很多了,尤其是移动端的.现在又多了一个 iView . iView 主要服务于 PC 界面的中后台业务,是一套高质量的开源 UI 组件库,先上地址: https://github.com/iview/iview 官网是: https://www.iviewui.com/ 特性 使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发,支持 ES2015 高质量.功能丰富 友好的 API ,自由灵活地使用空间 详细.友好的

  • ant design的table组件实现全选功能以及自定义分页

    我就废话不多说了,大家还是直接看代码吧~ ant design的table组件实现全选功能以及自定义分页 直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent extends Component { constructor (props) { super(props); this.st

  • ant design vue的table取消自带分页问题

    ant design vue的table取消自带分页问题

    目录 ant design vue的table取消自带分页 题外话: ant design vue table分页 ant design vue table分页设置 ant design vue的table取消自带分页 在我们使用ant design vue的table组件的时候会发现: 组件使用如示: <a-table :columns="columns" :data-source="data" bordered></a-table> 显然

  • 关于iview和elementUI组件样式覆盖无效问题及解决

    目录 iview和elementUI组件样式覆盖无效 新建一个不含scoped的style标签覆盖组件样式 /deep/ 预处理器less下使用 Element-ui与IView中的样式覆盖问题 在Element-UI中覆盖样式 在IView中覆盖样式 iview和elementUI组件样式覆盖无效 iview和elementUI是我们在用vue开发项目时比较常用到的ui组件,在我们使用第三方UI组件库开发时有时需要对这些组件进行一些样式修改. 为了vue页面样式模块化,不对全局样式造成污染,我

随机推荐