本文主要介绍如何在Vue2下使用excel的过滤样式，并且达到自定义的效果，比如：限制某列进行过滤，过滤模式使用ByValue或者ByCondition的自定义，话不多说我们直接先来看我们的演示效果.

发布于 2017/08/22 00:00

概述

本文主要介绍如何在Vue2下使用excel的过滤样式，并且达到自定义的效果，比如：限制某列进行过滤，过滤模式使用ByValue或者ByCondition的自定义，话不多说我们直接先来看我们的演示效果

首先我们从图中可以看到我们限制了Date、Active两列的过滤操作，图标消失了。

然后，我们设置了Contry列使用值过滤，Revenue使用条件过滤

这两个技术点主要核心代码如下：

   1:                  var filtercol = 'country,amount'.split(',')

   2:                  //设置过滤是conditon的

   3:                  var f = new wijmo.grid.filter.FlexGridFilter(s);

   4:                  //设置某列过滤

   5:                  f.filterColumns = filtercol;//列数组

   6:                  //所有过滤列的统一设定

   7:                  //f.defaultFilterType = wijmo.grid.filter.FilterType.Condition;

   8:                  //设置country列为值过滤

   9:                  var col = s.columns.getColumn('country'),

  10:                  cf = f.getColumnFilter(col);

  11:                  cf.filterType = wijmo.grid.filter.FilterType.Value;

  12:                  //设置amount列为条件过滤

  13:                  var col = s.columns.getColumn('amount'),

  14:                  cf = f.getColumnFilter(col);

  15:                  cf.filterType = wijmo.grid.filter.FilterType.Condition;

下面上传demo:

VueFilter.zip

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商，以“赋能开发者”为使命，致力于通过表格控件、低代码和BI等各类软件开发工具和服务，一站式满足开发者需求，帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年，40余年来始终聚焦软件开发技术，有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态，与超过3000家合作伙伴紧密合作，产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。

Vue2下Wijmo如何自定义过滤器

概述

更多信息请参照：

关于葡萄城

葡萄城热门产品

概述

更多信息请参照：

关于葡萄城

ComponentOne Enterprise

葡萄城热门产品