antd-design-vue table 过滤

Ant Design Vue (简称`antd-design-vue`) 中的表格组件 `Table` 提供了丰富的过滤功能，通常通过集成其内置的列筛选器(`filter` 属性) 或者配合自定义方法实现。以下是基本的使用步骤：

1. **使用列筛选器**：在`Table`的列配置中添加`filters`属性，它可以是一个数组，每个元素包含两个部分：筛选选项和转换函数。例如：

   <a-table :columns="columns" :data-source="tableData">
     <!-- ... -->
     <a-table-column
       prop="name"
       title="姓名"
       filters={[
         { text: '全部', value: '' },
         { text: '张三', value: '张三' },
         { text: '李四', value: '李四' }
       ]}
     ></a-table-column>
   </a-table>

当用户选择筛选项时，会动态过滤数据。

2. **自定义过滤逻辑**：如果需要更复杂的过滤条件，可以为`filters`属性提供一个函数，该函数接收当前值、搜索关键字以及原始数据作为参数，返回过滤后的数据：

   columns: [
     {
       prop: 'status',
       // 自定义过滤函数
       filters: (value, filterVal, tableData) => {
         return tableData.filter(row => row.status === value || row.status.includes(filterVal));
       },
       // ...
     }
   ]

3. **事件监听**：可以利用`onFilter`事件处理用户的筛选操作，它会在用户选择新的过滤项后触发。