vxe-grid v3 过滤怎么使用

VxeGrid是一个基于Vue.js的高性能表格组件库，v3版本提供了一套强大的过滤功能。要在VxeGrid中设置过滤，你可以按照以下步骤操作：

1. **安装依赖**:
首先，你需要在项目中安装`@vue-xe-utils/core`和`@vue-xe-table/grid`这两个依赖。如果你使用的是npm或yarn，可以分别运行以下命令：

   npm install @vue-xe-utils/core @vue-xe-table/grid
   # 或者
   yarn add @vue-xe-utils/core @vue-xe-table/grid

2. **配置组件**:
在你的组件模板文件中引入VxeGrid，并设置filter属性开启过滤功能。例如：

   <x-grid :columns="columns" :data="data" filter></x-grid>

3. **配置列的过滤选项**:
每个需要过滤的列，可以在对应的column对象里添加filter配置。比如，如果你想允许文本搜索，可以这样做：

   const columns = [
     {
       field: 'name', // 列名对应数据中的字段
       title: '姓名',
       filter: { type: 'text' }, // 设置为文本过滤类型
     },
     // 更多其他列...
   ];

4. **数据处理**:
当用户输入过滤条件时，`filter`事件会被触发，这时你需要在监听这个事件的处理器中动态更新数据源。例如：

   methods: {
     handleFilterChange(field, value) {
       this.data = this.data.filter(item => item[field].includes(value));
     }
   },
   mounted() {
     this.$refs.grid.on('filter-change', (field, value) => {
       this.handleFilterChange(field, value);
     });
   }

5. **初始化过滤**:
如果你想预设初始的过滤条件，可以在`mounted`生命周期钩子中初始化：

   mounted() {
     this.handleFilterChange('name', 'John');
   }