快捷導(dǎo)航

Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能

更新時(shí)間：2024年05月28日 10:49:49 作者：℡52Hz

在做后臺(tái)管理系統(tǒng)項(xiàng)目的時(shí)候,產(chǎn)品增加了一個(gè)在Select選擇器中添加一鍵全選和清空的功能,他又不讓在外部增加按鈕,其實(shí)如果說在外部增加按鈕實(shí)現(xiàn)全選或者清空的話,功能比較簡單的,下面給大家分享Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能,需要的朋友可以參考下

最近在做后臺(tái)管理系統(tǒng)項(xiàng)目的時(shí)候，產(chǎn)品增加了一個(gè)讓人非?？鄲赖男枨螅屧赟elect選擇器中添加一鍵全選和清空的功能，剛開始聽到的時(shí)候真是很懵，他又不讓在外部增加按鈕，其實(shí)如果說在外部增加按鈕實(shí)現(xiàn)全選或者清空的話，功能相對(duì)來說還是比較簡單的。咱也是沒辦法啊公司的牛馬，只能按照需求來修改了。好在通過查找了資料自己又進(jìn)行了總結(jié)之后，實(shí)現(xiàn)了讓人惱火的需求，因?yàn)樵诓檎屹Y料的時(shí)候發(fā)現(xiàn)對(duì)于這一塊的知識(shí)點(diǎn)，網(wǎng)上的還是少之又少的，基本上都是vue2的方式，所以咱既然已經(jīng)實(shí)現(xiàn)了，就分享給大家一起共享咯。

一、搭建頁面

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

<template>
    <div class="test">
        <a-form-item label="營運(yùn)單位" style="width: 16vw; margin: 15px">
          <a-select
            mode="multiple"
            :max-tag-count="1"
            allowClear
            v-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>
            <!-- 全選---這里就是實(shí)現(xiàn)一鍵全選和清空的細(xì)節(jié)操作 -->
            <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>
//所選擇的營運(yùn)單位
const valueGlc=ref('')
//營運(yùn)單位選項(xiàng)列表
const optionsGlc=ref([])
//下拉菜單組件不可少，不然后續(xù)不顯示菜單
const VNodes = (_, { attrs }) => {
  return attrs.vnodes
}
//選擇營運(yùn)單位事件
const changeUnit=()=>{}
// 一鍵全選
const selectAll=()=>{}
// 一鍵清空
const clearAll=()=>{}
</script>
<style lang='less' scoped>
.test{}
</style>

二、獲取select菜單中的數(shù)據(jù)

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

<script setup>
//來源于封裝后的數(shù)據(jù)地址--僅供參考
import { selectorRoadDeptLists } from '@/api/tjfx.js'
//所選擇的營運(yùn)單位
const valueGlc=ref('')
//營運(yùn)單位選項(xiàng)列表
const optionsGlc=ref([])
//下拉菜單組件不可少，不然后續(xù)不顯示菜單
const VNodes = (_, { attrs }) => {
  return attrs.vnodes
}
//選擇營運(yùn)單位事件
const changeUnit=()=>{}
// 一鍵全選
const selectAll=()=>{}
// 一鍵清空
const clearAll=()=>{}
// 獲取下拉框數(shù)據(jù)-營運(yùn)單位
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中已經(jīng)有對(duì)應(yīng)的數(shù)據(jù)了，但是最重要的步驟還未實(shí)施，下面是實(shí)現(xiàn)一鍵全選的代碼

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

四、一鍵清空

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

五、詳細(xì)代碼

以上就是實(shí)現(xiàn)一鍵全選和一鍵清空的詳細(xì)步驟啦，沒看懂的小伙伴最后附上全部代碼

<template>
    <div class="test">
        <a-form-item label="營運(yùn)單位" style="width: 16vw; margin: 15px">
          <a-select
            mode="multiple"
            :max-tag-count="1"
            allowClear
            v-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>
            <!-- 全選---這里就是實(shí)現(xiàn)一鍵全選和清空的細(xì)節(jié)操作 -->
            <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'
//所選擇的營運(yùn)單位
const valueGlc=ref('')
//營運(yùn)單位選項(xiàng)列表
const optionsGlc=ref([])
//下拉菜單組件不可少，不然后續(xù)不顯示菜單
const VNodes = (_, { attrs }) => {
  return attrs.vnodes
}
//選擇營運(yùn)單位事件
const changeUnit=()=>{}
// 一鍵全選
const selectAll=()=>{
    valueGlc.value = optionsGlc.value.map(option => option.value)
}
// 一鍵清空
const clearAll=()=>{
    valueGlc.value = []
}
// 獲取下拉框數(shù)據(jù)-營運(yùn)單位
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>

到此這篇關(guān)于Vue3+Ant design 實(shí)現(xiàn)Select下拉框一鍵全選/清空的文章就介紹到這了,更多相關(guān)Vue3 Ant design下拉框全選內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: