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

发布时间：2020-09-24 12:49:42 阅读：458 作者：哈哈哈栏目：web开发

开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

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

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

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

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

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

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签