ant design vue自定义筛选

Ant Design Vue 的 Table 组件支持自定义筛选功能。你可以使用 `customFilterDropdown` 和 `customRender` 属性来实现自定义筛选。

下面是一个示例代码，演示如何在 Ant Design Vue 的表格中添加自定义筛选功能：

<template>
  <a-table :columns="columns" :data-source="data" row-key="id" :pagination="false">
    <template #name="text, record">
      <a-input v-model="record.nameFilter" @change="handleFilter($event.target.value, record, 'name')" />
    </template>
    <template #age="text, record">
      <a-input-number v-model="record.ageFilter" @change="handleFilter($event, record, 'age')" />
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: 'John Doe', age: 22, nameFilter: '', ageFilter: null },
        { id: 2, name: 'Jane Smith', age: 25, nameFilter: '', ageFilter: null },
        { id: 3, name: 'Bob Johnson', age: 30, nameFilter: '', ageFilter: null },
      ],
      columns: [
        { title: '姓名', dataIndex: 'name', customFilterDropdown: true },
        { title: '年龄', dataIndex: 'age', customFilterDropdown: true },
      ],
    };
  },
  methods: {
    handleFilter(value, record, dataIndex) {
      this.data = this.data.map(item => {
        if (item.id === record.id) {
          return {
            ...item,
            [dataIndex]: value,
          };
        }
        return item;
      });
    },
  },
};
</script>

在上述示例中，我们使用了 Ant Design Vue 的 `a-input` 和 `a-input-number` 组件作为自定义筛选框。通过在 `template` 标签中指定 `#name` 和 `#age` 来自定义每列的筛选框。`nameFilter` 和 `ageFilter` 分别用于存储筛选框的值。

在 `handleFilter` 方法中，我们根据输入的值更新对应列的筛选框的值。通过 `map` 方法更新数据源中对应项的值。

这样，我们就可以在表格中进行自定义筛选了。