vue3.2 antdv 表格每列筛选

你可以使用 Ant Design Vue 提供的 Table 组件来实现每列的筛选功能。首先，确保你已经安装了 Ant Design Vue 和相关的依赖。

在你的组件中，引入 Table 组件并设置列的筛选属性。例如：

<template>
  <a-table :columns="columns" :data-source="data" :pagination="false">
    <!-- 其他表格内容 -->
  </a-table>
</template>

<script>
import { ref } from 'vue';
import { Table } from 'ant-design-vue';

export default {
  components: {
    Table,
  },
  setup() {
    const columns = ref([
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        filters: [
          { text: 'John', value: 'John' },
          { text: 'Smith', value: 'Smith' },
        ],
        onFilter: (value, record) => record.name === value,
      },
      // 其他列配置
    ]);

    const data = ref([
      { key: '1', name: 'John', age: 32, address: 'New York' },
      { key: '2', name: 'Smith', age: 25, address: 'London' },
      // 其他数据
    ]);

    return {
      columns,
      data,
    };
  },
};
</script>

在上面的示例中，我们定义了一个 `columns` 数组来配置表格的列。每个列对象都包含了 `filters` 和 `onFilter` 属性。`filters` 是一个筛选选项数组，每个选项都包含 `text` 和 `value`。`onFilter` 是一个回调函数，用于根据选中的筛选值来过滤表格数据。

你可以根据实际情况自定义列的筛选选项和筛选逻辑。然后，将 `columns` 数组和表格数据 `data` 绑定到 Table 组件相应属性上即可实现每列的筛选功能。

希望这帮助到你！如果还有其他问题，请随时提问。