快捷導(dǎo)航

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

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

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

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

一、搭建頁面

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

<template>
    <div class="test">
        <a-form-item label="營運單位" 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>
            <!-- 全選---這里就是實現(xiàn)一鍵全選和清空的細節(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>
//所選擇的營運單位
const valueGlc=ref('')
//營運單位選項列表
const optionsGlc=ref([])
//下拉菜單組件不可少，不然后續(xù)不顯示菜單
const VNodes = (_, { attrs }) => {
  return attrs.vnodes
}
//選擇營運單位事件
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'
//所選擇的營運單位
const valueGlc=ref('')
//營運單位選項列表
const optionsGlc=ref([])
//下拉菜單組件不可少，不然后續(xù)不顯示菜單
const VNodes = (_, { attrs }) => {
  return attrs.vnodes
}
//選擇營運單位事件
const changeUnit=()=>{}
// 一鍵全選
const selectAll=()=>{}
// 一鍵清空
const clearAll=()=>{}
// 獲取下拉框數(shù)據(jù)-營運單位
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)有對應(yīng)的數(shù)據(jù)了，但是最重要的步驟還未實施，下面是實現(xiàn)一鍵全選的代碼

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

四、一鍵清空

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

五、詳細代碼

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

<template>
    <div class="test">
        <a-form-item label="營運單位" 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>
            <!-- 全選---這里就是實現(xiàn)一鍵全選和清空的細節(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'
//所選擇的營運單位
const valueGlc=ref('')
//營運單位選項列表
const optionsGlc=ref([])
//下拉菜單組件不可少，不然后續(xù)不顯示菜單
const VNodes = (_, { attrs }) => {
  return attrs.vnodes
}
//選擇營運單位事件
const changeUnit=()=>{}
// 一鍵全選
const selectAll=()=>{
    valueGlc.value = optionsGlc.value.map(option => option.value)
}
// 一鍵清空
const clearAll=()=>{
    valueGlc.value = []
}
// 獲取下拉框數(shù)據(jù)-營運單位
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 實現(xiàn)Select下拉框一鍵全選/清空的文章就介紹到這了,更多相關(guān)Vue3 Ant design下拉框全選內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: