Vue3+Ant design 实现Select下拉框一键全选/清空功能

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

在做后台管理系统项目的时候,产品增加了一个在Select选择器中添加一键全选和清空的功能,他又不让在外部增加按钮,其实如果说在外部增加按钮实现全选或者清空的话,功能比较简单的,下面给大家分享Vue3+Ant design 实现Select下拉框一键全选/清空功能,需要的朋友可以参考下

最近在做后台管理系统项目的时候，产品增加了一个让人非常苦恼的需求，让在Select选择器中添加一键全选和清空的功能，刚开始听到的时候真是很懵，他又不让在外部增加按钮，其实如果说在外部增加按钮实现全选或者清空的话，功能相对来说还是比较简单的。咱也是没办法啊公司的牛马，只能按照需求来修改了。好在通过查找了资料自己又进行了总结之后，实现了让人恼火的需求，因为在查找资料的时候发现对于这一块的知识点，网上的还是少之又少的，基本上都是vue2的方式，所以咱既然已经实现了，就分享给大家一起共享咯。

一、搭建页面

在项目中安装和引用ant design组件这里就不在细说了，前面的很多案例中都有讲解这一块，不会的小伙伴可以进行查看即可，当然去ant design官网也有这些操作哦。

<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>
            <!-- 全选---这里就是实现一键全选和清空的细节操作 -->
            <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-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>
            <!-- 全选---这里就是实现一键全选和清空的细节操作 -->
            <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>

到此这篇关于Vue3+Ant design 实现Select下拉框一键全选/清空的文章就介绍到这了,更多相关Vue3 Ant design下拉框全选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue中如何优雅的捕获 Promise 异常详解
这篇文章主要为大家介绍了Vue中如何优雅的捕获 Promise 异常详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
vue3 文档梳理快速入门
vue3之所以受广大袁友的喜欢，优点必不可少呀，比如：可以监听动态新增的属性；可以监听删除的属性；可以监听数组的索引和 length 属性；下面文章小编就来向大家介绍vue3，感兴趣的小伙伴不要错过奥
2021-09-09
Vue指令的学习
这篇文章主要介绍了Vue指令，Vue官网一共有提供了14个指令，下面我们就来详细讲解每一个指令的详细内容,需要的朋友可以参考一下
2021-10-10
vue实现绑定事件的方法实例代码详解
这篇文章主要介绍了vue实现绑定事件的方法实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
vue 实现上传组件
虽然前端UI框架大都提供文件上传的组件，以及很多插件可供选择，工作中可能不需要我们手写一个上传组件，但是从零封装组件对学习是很有助益的。下文为大家介绍使用Vue3+TypeScript实现的一个文件上传的功能，目前只实现上传等基本功能，后续会逐渐对功能进行扩展
2021-05-05
详解Vue路由开启keep-alive时的注意点
这篇文章主要介绍了详解Vue路由开启keep-alive时的注意点，非常具有实用价值，有兴趣的朋友可以了解一下
2017-06-06
Vue实现PopupWindow组件详解
这篇文章主要为大家详细介绍了Vue实现PopupWindow组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-04-04
在Vue中引入SVG图标的多种实现方案
SVG图标集锦是一个丰富的资源库,包含了多个知名图标的集合,如bootstrap、feather、iconpark、ikonate和ionicons等,这些图标是为网页开发设计的,具有高质量和高度可定制性,在 Vue 项目中优雅地引入 SVG 图标可通过多种方案实现,下面小编给大家详细说说
2025-07-07
使用Vue自定义数字键盘组件(体验度极好)
最近做 Vue 开发，因为有不少页面涉及到金额输入，产品老是觉得用原生的 input 进行金额输入的话体验很不好，于是自己动手写了一个使用Vue自定义数字键盘组件，具体实现代码大家参考下本文
2017-12-12
Vue中的字符串模板的使用
本篇文章主要介绍了Vue中的字符串模板的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05