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="