vue3 antd项目实战——table表格的自定义筛选【纯前端filters过滤、自定义筛选table表格数据】

<template>
  <a-table :columns="columns" :dataSource="data" :pagination="false">
    <span slot="tags" slot-scope="tags">
      <a-tag v-for="tag in tags" :key="tag" :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
        {{ tag.toUpperCase() }}
      </a-tag>
    </span>
    <template slot="action" slot-scope="record">
      <a @click="handleEdit(record)">配置</a>
    </template>
  </a-table>
</template>
 
<script>
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        filters: [
          {
            text: 'Joe',
            value: 'Joe',
          },
          {
            text: 'John',
            value: 'John',
          },
        ],
        onFilter: (value, record) => record.name.includes(value),
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        filters: [
          {
            text: '20-30',
            value: '20-30',
          },
          {
            text: '30-40',
            value: '30-40',
          },
        ],
        onFilter: (value, record) => {
          const age = record.age;
          return (value === '20-30' && age >= 20 && age <= 30) || (value === '30-40' && age >= 30 && age <= 40);
        },
      },
      {
        title: 'Tags',
        key: 'tags',
        dataIndex: 'tags',
        filters: [
          {
            text: 'loser',
            value: 'loser',
          },
          {
            text: 'cool',
            value: 'cool',
          },
        ],
        filterMultiple: false,
        onFilter: (value, record) => record.tags.includes(value),
      },
      {
        title: 'Action',
        key: 'action',
        slots: { customRender: 'action' },
      },
    ];
 
    const data = [
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
      },
      {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
      },
      {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
      },
    ];
 
    const handleEdit = (record) => {