vue antd项目实战——select组件mode=“multiple“多选模式下限制选择个数

往期知识调用（步骤不懂就看这儿）

文章内容	文章链接
vue antd项目实战——checkbox多选框限制选择个数（disabled属性与includes方法）	https://blog.csdn.net/XSL_HR/article/details/129798090?spm=1001.2014.3001.5501
ant design vue组件库的引入与使用	https://blog.csdn.net/XSL_HR/article/details/127396384

场景复现

在近期的项目开发中，碰到了一个关于select组件mode="mutiple"多选模式限制选择个数的需求（具体需求如下）。涉及到select的使用以及ant design vue中的disabled属性，以及JavaScript中的findIndex方法。因此本期文章以需求为主线，学习上述三个知识点，实现需求。👇👇👇

具体需求：

• 多选最多选择八个
• 选满八个后，其他选项变成disabled状态
• 取消已选择的选项后，可以继续选择其他选项（非一次性）

方法：

• 借助ant design vue组件库的disabled属性
• 借助JavaScript原生的findIndex方法

最终效果：（部分页面）

实战演示

下面将通过实战代码来实现上述需求👇👇👇

项目的UI框架依旧采用ant design vue组件库（移步官方文档查看详情）

搭建之前，我们先看看官方文档对select的介绍，简单实现基础的多选模式下拉框

何时使用：

• 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
• 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。

基础搭建：（使用组件之前，一定要先注册后使用）

<template>
  <a-select
    v-model:value="value"
    mode="multiple"
    style="width: 100%"
    placeholder="Please select"
    :options="[...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))"
    @change="handleChange"
  ></a-select>
</template>
<script lang="ts">
import { ref } from 'vue';

const handleChange = (value: string[]) => {
   console.log(`selected ${value}`);
};

const value = ref(['a1', 'b2']),
</script>

实现效果：

1、多选模式下拉选择框的搭建

多选框的数据来自于后端接口返回的数据

源代码：

<a-select 
   v-model:value="formState.projectMember" 
   style="width: 400px;" 
   placeholder="请选择项目成员（不超过八人）"
   mode="multiple"
   :maxTagCount="8"
   :showArrow="true"
   allowClear
   >
   <a-select-option 
      v-for="item of projectMemberOptions" 
      :key="item"
      >{{item}}
   </a-select-option>
</a-select>
<p 
  style="
     color:rgba(0, 0, 0, 0.45);
     margin-bottom:-10px
     "
  >项目成员最多只能选择八人
</p>

实现效果：（部分页面）

此时只是限制了输入框展示的tag标签为八个，并没有从根本限制选择的数据个数

2、多选下拉框限制选择个数

利用JavaScript原生的findIndex方法，判断数组中符合条件的元素。

源代码：

<a-select 
   v-model:value="formState.projectMember" 
   style="width: 400px;" 
   placeholder="请选择项目成员（不超过八人）"
   mode="multiple"
   :maxTagCount="8"
   :showArrow="true"
   allowClear
   >
   <a-select-option 
      v-for="item of projectMemberOptions" 
      :key="item"
      :disabled="
                formState.projectMember.length == 8 
                && (formState.projectMember.findIndex(i=> i === item.labelCode) === -1)
                "
      >{{item}}
   </a-select-option>
</a-select>
<p 
  style="
     color:rgba(0, 0, 0, 0.45);
     margin-bottom:-10px
     "
  >项目成员最多只能选择八人
</p>

实现效果：

---

此时，需求已经全部实现！！

---

下期文章将介绍vue antd spinning动画的使用（增强交互体验）~ ~ 感兴趣的小伙伴可以订阅本专栏，方便后续了解学习~ 觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~