Vuetify3：v-data-table增加下拉筛选

我们在做列表显示的时候为了让用户快速找到自己想要的数据，都会提供快捷筛选，我们就需要在  v-data-table 表头中提供下拉选择，我们可以参考v-data-table Headers 插槽 ，扩展很强，我们可以自定义，代码：

<template v-slot:headers="{ columns, isSorted, getSortIcon, toggleSort }">
    <tr align="text-center">
        <template v-for="column in columns" :key="column.key">
            <td :align=" column.isFilter? '':'center'">
                <span class="mr-2 cursor-pointer" @click="() => toggleSort(column)">{{ column.title }}</span>
                <template v-if="!column.isFilter && isSorted(column)">
                    <v-icon :icon="getSortIcon(column)"></v-icon>
                </template>

                <v-menu v-if="column.isFilter">
                    <template v-slot:activator="{ props }">
                        <span v-bind="props">
                            院校层次<v-icon size="x-large">mdi-menu-down</v-icon>
                        </span>
                    </template>
                    <v-list>
                        <v-list-item v-for="(item, index) in sortItems" :key="index" :value="index" >
                            <v-list-item-title class="text-caption">{{ item.name }}</v-list-item-title>
                        </v-list-item>
                    </v-list>
                </v-menu>
            </td>
        </template>
    </tr>
</template>

这个就是我们在指定header后面添加下拉筛选样式