我们在做列表显示的时候为了让用户快速找到自己想要的数据,都会提供快捷筛选,我们就需要在 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后面添加下拉筛选样式