Vue版本3.5,ant-design-vue版本4.2.5;
业务要求“多选下拉框”组件支持对过滤后的下拉项进行“全选”和“取消全选”功能。

截图
<a-select v-model:value="selectValue" mode="multiple" allow-clear showSearch allow-filter-value option-filter-prop="label" max-tag-count="1" :search-value="searchValue" :auto-clear-search-value="false" @search="(value) => searchSelect(value)" @dropdownVisibleChange="(open) => dropdownVisibleChange(open)">
<template #dropdownRender="{ menuNode: menu }">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 4px 0" />
<div style="padding: 4px 8px">
<p-button type="text" @click="selectAll(item)">全选</p-button>
<p-button type="text" style="margin-left: 10px;" @click="deselectAll(item)">取消全选</p-button>
</div>
</template>
<a-select-option v-for="it in selectOptions" :key="it.value" :value="it.value" :label="it.label">
{{ it.label }}</a-select-option>
</a-select>
import { ref, defineComponent } from 'vue'
const VNodes = defineComponent({
props: {
vnodes: {
type: Object,
required: true,
},
},
render() {
return this.vnodes;
}
})
const selectOptions = ref([{ label: 'one', value: 'one' },{ label: 'two', value: 'two' }])
const selectValue = ref([])
const searchValue = ref('')
const searchSelect = (value) => {
searchValue.value = value
}
// 全选/取消全选
const selectAll = (item) => {
if (searchValue) {
let filterList = []
let filterListValue = []
filterList = selectOptions.value.filter(i => i.label?.includes(searchValue))
filterListValue = filterList.map(i => i.value)
selectValue.value = [...selectValue.value, ...filterListValue]
} else {
selectValue.value = selectOptions.map(i => i.value)
}
}
const deselectAll = (item) => {
if (searchValue) {
let filterList = selectOptions.value.filter(i => i.label.includes(searchValue))
const filterListValue = filterList.map(i => i.value)
selectValue.value = selectValue.value.filter(i => !filterListValue.includes(i))
} else {
selectValue.value = []
}
}
// 隐藏下拉框时清除搜索值
const dropdownVisibleChange = (open, item) => {
if (open) {
} else {
searchValue.value = ''
}
}