我需要一个 vue3+ant design vue 表格筛选器的代码

下面是一个基于 Vue3 和 Ant Design Vue 的表格筛选器的示例代码：

<template>
  <div>
    <a-table :columns="columns" :data-source="dataSource" :pagination="false" :loading="loading">
      <template #filterName="{ text, record }">
        <a-input v-model:value="record.nameFilter" @change="onFilterChange" />
      </template>
      <template #filterAge="{ text, record }">
        <a-input-number v-model:value="record.ageFilter" @change="onFilterChange" />
      </template>
    </a-table>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { Table, Input, InputNumber } from 'ant-design-vue';

export default defineComponent({
  components: {
    Table,
    Input,
    InputNumber,
  },
  data() {
    return {
      loading: false,
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          slots: { filterName: 'filterName' },
          // 自定义筛选函数
          customFilter: (value, record) => record.name.includes(value),
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
          slots: { filterAge: 'filterAge' },
          // 自定义筛选函数
          customFilter: (value, record) => record.age === value,
        },
      ],
      dataSource: [
        { name: 'John', age: 30, nameFilter: '', ageFilter: undefined },
        { name: 'Jane', age: 25, nameFilter: '', ageFilter: undefined },
        { name: 'Bob', age: 40, nameFilter: '', ageFilter: undefined },
      ],
    };
  },
  methods: {
    onFilterChange() {
      this.loading = true;
      setTimeout(() => {
        const filters = this.columns.reduce((accumulator, column) => {
          if (column.customFilter) {
            accumulator[column.dataIndex] = column.customFilter;
          }
          return accumulator;
        }, {});
        const filteredData = this.dataSource.filter((record) =>
          Object.entries(filters).every(([key, filterFn]) => filterFn(record[key], record)),
        );
        this.dataSource = filteredData;
        this.loading = false;
      }, 500);
    },
  },
});
</script>

在上面的示例代码中，我们首先引入了 `Table`、`Input` 和 `InputNumber` 组件，然后在组件选项中定义了表格的数据源、列定义和数据筛选函数。

每个列对应的筛选器都是通过 `slots` 属性来定义的，例如定义了一个名为 `filterName` 的插槽，这个插槽会在表格的每一行中渲染一个带有文本框的单元格，用户可以在文本框中输入筛选条件。

每个列还有一个 `customFilter` 属性，这个属性是一个自定义的筛选函数，用于根据用户输入的筛选条件对数据进行过滤。在 `onFilterChange` 方法中，我们遍历所有的列定义，找到具有自定义筛选函数的列，然后调用这些筛选函数对数据进行过滤，最后更新表格的数据源。

在实际开发中，你可以根据自己的需求来自定义表格的列定义、数据源和筛选函数，以实现更加灵活和强大的表格筛选功能。