最近在做后臺管理系統項目的時候，產品增加了一個讓人非常苦惱的需求，讓在Select選擇器中添加一鍵全選和清空的功能，剛開始聽到的時候真是很懵，他又不讓在外部增加按鈕，其實如果說在外部增加按鈕實現全選或者清空的話，功能相對來說還是比較簡單的。咱也是沒辦法啊公司的牛馬，只能按照需求來修改了。好在通過查找了資料自己又進行了總結之后，實現了讓人惱火的需求，因為在查找資料的時候發現對于這一塊的知識點，網上的還是少之又少的，基本上都是vue2的方式，所以咱既然已經實現了，就分享給大家一起共享咯。

一、搭建頁面

在項目中安裝和引用ant design組件這里就不在細說了，前面的很多案例中都有講解這一塊，不會的小伙伴可以進行查看即可，當然去ant design官網也有這些操作哦。

<template><div class="test"><a-form-item label="營運單位" style="width: 16vw; margin: 15px"><a-selectmode="multiple":max-tag-count="1"allowClearv-model:value="valueGlc"@change="changeUnit":options="optionsGlc"><template #maxTagPlaceholder="omittedValues"><span class="allSelsct" v-if="optionsGlc.length === omittedValues.length + 1">全選</span><span v-else>+ {{ omittedValues.length }} ...</span></template><!-- 全選---這里就是實現一鍵全選和清空的細節操作 --><template #dropdownRender="{ menuNode: menu }"><v-nodes :vnodes="menu" /><a-divider style="margin: 4px 0" /><div style="padding: 4px 8px; margin-left: 50px; cursor: pointer" @mousedown="e => e.preventDefault()"><a-button type="link" @click="selectAll">全選</a-button><a-button type="link" @click="clearAll">清空</a-button></div></template></a-select></a-form-item></div>
</template><script setup>
//所選擇的營運單位
const valueGlc=ref('')
//營運單位選項列表
const optionsGlc=ref([])
//下拉菜單組件不可少，不然后續不顯示菜單
const VNodes = (_, { attrs }) => {return attrs.vnodes
}
//選擇營運單位事件
const changeUnit=()=>{}
// 一鍵全選
const selectAll=()=>{}
// 一鍵清空
const clearAll=()=>{}
</script><style lang='less' scoped>
.test{}
</style>

二、獲取select菜單中的數據

提示： 在這里獲取數據是使用了公司封裝后的框架

<script setup>
//來源于封裝后的數據地址--僅供參考
import { selectorRoadDeptLists } from '@/api/tjfx.js'
//所選擇的營運單位
const valueGlc=ref('')
//營運單位選項列表
const optionsGlc=ref([])
//下拉菜單組件不可少，不然后續不顯示菜單
const VNodes = (_, { attrs }) => {return attrs.vnodes
}
//選擇營運單位事件
const changeUnit=()=>{}
// 一鍵全選
const selectAll=()=>{}
// 一鍵清空
const clearAll=()=>{}
// 獲取下拉框數據-營運單位
const getOptionsGlc = () => {return new Promise((resolve, reject) => {selectorRoadDeptLists().then(res => {if (res.code === 200 && res.data) {res.data.forEach((item, index) => {optionsGlc.value.push({value: item.code,code: item.code,label: item.name})valueGlc.value.push(item.code)})}})})
}
onMounted(() => {getOptionsGlc()
})

三、一鍵全選

在操作完以上的步驟后，select中已經有對應的數據了，但是最重要的步驟還未實施，下面是實現一鍵全選的代碼

// 一鍵全選
const selectAll=()=>{valueGlc.value = optionsGlc.value.map(option => option.value)
}

?

四、一鍵清空

// 一鍵清空
const clearAll=()=>{valueGlc.value = []
}

?

五、詳細代碼

以上就是實現一鍵全選和一鍵清空的詳細步驟啦，沒看懂的小伙伴最后附上全部代碼

<template><div class="test"><a-form-item label="營運單位" style="width: 16vw; margin: 15px"><a-selectmode="multiple":max-tag-count="1"allowClearv-model:value="valueGlc"@change="changeUnit":options="optionsGlc"><template #maxTagPlaceholder="omittedValues"><span class="allSelsct" v-if="optionsGlc.length === omittedValues.length + 1">全選</span><span v-else>+ {{ omittedValues.length }} ...</span></template><!-- 全選---這里就是實現一鍵全選和清空的細節操作 --><template #dropdownRender="{ menuNode: menu }"><v-nodes :vnodes="menu" /><a-divider style="margin: 4px 0" /><div style="padding: 4px 8px; margin-left: 50px; cursor: pointer" @mousedown="e => e.preventDefault()"><a-button type="link" @click="selectAll">全選</a-button><a-button type="link" @click="clearAll">清空</a-button></div></template></a-select></a-form-item></div>
</template><script setup>
import { selectorRoadDeptLists } from '@/api/tjfx.js'
//所選擇的營運單位
const valueGlc=ref('')
//營運單位選項列表
const optionsGlc=ref([])
//下拉菜單組件不可少，不然后續不顯示菜單
const VNodes = (_, { attrs }) => {return attrs.vnodes
}
//選擇營運單位事件
const changeUnit=()=>{}
// 一鍵全選
const selectAll=()=>{valueGlc.value = optionsGlc.value.map(option => option.value)
}
// 一鍵清空
const clearAll=()=>{valueGlc.value = []
}
// 獲取下拉框數據-營運單位
const getOptionsGlc = () => {return new Promise((resolve, reject) => {selectorRoadDeptLists().then(res => {if (res.code === 200 && res.data) {res.data.forEach((item, index) => {optionsGlc.value.push({value: item.code,code: item.code,label: item.name})valueGlc.value.push(item.code)})}})})
}
onMounted(() => {getOptionsGlc()
})
</script><style lang='less' scoped>
.test{}
</style>