vue antd项目实战——checkbox多选框限制选择个数（disable属性与includes方法）
往期知识调用（步骤不懂就看这儿）场景复现实战演示1、基础多选框的搭建2、选择个数的限制3、不同类型限制个数不同往期知识调用（步骤不懂就看这儿）
场景复现
在近期的项目开发中，碰到了一个关于checkbox多选框限制选择个数的需求（具体需求如下）。涉及到checkbox的使用以及ant design vue中的disabled属性，以及JavaScript中的includes方法。因此本期文章以需求为主线，学习上述三个知识点，实现需求。👇👇👇
具体需求：
多选框最多选择三个（团体荣誉只能选择两个）选满三个（或两个）后，其他选项变成disable状态取消已选择的选项后，可以继续选择其他选项（非一次性）
方法：
借助
ant design vue组件库的disable属性借助JavaScript原生的includes方法
最终效果：（部分页面）
实战演示
下面将通过实战代码来实现上述需求👇👇👇
项目的UI框架依旧采用
ant design vue组件库（移步官方文档查看详情）
搭建之前，我们先看看官方文档对checkbox的介绍，简单实现基础的多选框。
何时使用：
在一组选项可以进行多项选择时。单独使用可以表示两种状态之间的切换，和switch类似。区别在于切换switch会直接触发状态改变，而checkbox一般用于状态标记，需要和提交操作配合。
基础搭建：（使用组件之前一定要先注册后使用）
<template><a-checkbox v-model:checked="checked">Checkbox</a-checkbox></template><script lang="ts">import {defineComponent, ref } from 'vue';const checked = ref(false),</script>
实现效果：
1、基础多选框的搭建
源代码：
<a-checkbox-group v-model:value="formState.certificates_seal_select" name="sealcheckboxGroup"style="margin-top:6px"><a-checkbox value="fmins_work-js">五分钟讲堂工作室公章 </a-checkbox><a-checkbox value="fmins_trail">五分钟讲堂培训专用章</a-checkbox><a-checkbox value="multiple_manager">综合管理部公章</a-checkbox><a-checkbox value="ued">产品与UED部公章</a-checkbox><br/><div style="height:5px"> </div><a-checkbox value="duoduoywh_department">多多的宇文化工作室公章</a-checkbox><a-checkbox value="dev_and_test">技术研发与测试部公章</a-checkbox><a-checkbox value="school_and_media">校园媒体部公章</a-checkbox><a-checkbox value="learing_and_teaching">学科教研部公章</a-checkbox></a-checkbox-group>
实现效果：（当然，这里的默认选项是在script代码里添加的）
到这里，我们已经搭建好了印章多选框的基本样式，接下来则是逻辑的实现——选择个数的限制。
2、选择个数的限制
选择个数的限制可以通过判断存储该数据的数组长度来实现，至于非一次性问题，则使用includes实现数据的实时监听效果。
源代码：
<a-checkbox-group v-model:value="formState.certificates_seal_select" name="sealcheckboxGroup"style="margin-top:6px"><a-checkbox value="fmins_work-js" :disabled="(formState.certificates_seal_select.length <== 3|| formState.certificates_seal_select.includes('fmins_work-js') == true)? false : true">五分钟讲堂工作室公章 </a-checkbox><a-checkbox value="fmins_trail":disabled="(formState.certificates_seal_select.length < == 3) || formState.certificates_seal_select.includes('fmins_trail') == true)? false : true">五分钟讲堂培训专用章</a-checkbox><a-checkbox value="multiple_manager":disabled="(formState.certificates_seal_select.length <== 3|| formState.certificates_seal_select.includes('multiple_manager') == true)? false : true">综合管理部公章</a-checkbox><a-checkbox value="ued":disabled="(formState.certificates_seal_select.length <== 3|| formState.certificates_seal_select.includes('ued') == true)? false : true">产品与UED部公章</a-checkbox><br/><div style="height:5px"> </div><a-checkbox value="duoduoywh_department":disabled="(formState.certificates_seal_select.length <== 3) || formState.certificates_seal_select.includes('duoduoywh_department') == true)? false : true">多多的宇文化工作室公章</a-checkbox><a-checkbox value="dev_and_test":disabled="(formState.certificates_seal_select.length <== 3) || formState.certificates_seal_select.includes('dev_and_test') == true)? false : true">技术研发与测试部公章</a-checkbox><a-checkbox value="school_and_media":disabled="(formState.certificates_seal_select.length <== 3) || formState.certificates_seal_select.includes('school_and_media') == true)? false : true">校园媒体部公章</a-checkbox><a-checkbox value="learing_and_teaching":disabled="(formState.certificates_seal_select.length <== 3|| formState.certificates_seal_select.includes('learning_and_teaching') == true)? false : true">学科教研部公章</a-checkbox></a-checkbox-group>
详细解释：
将每一个证书选项与表单的值进行双向绑定根据印章个数（即存储该数据的数组的长度）来限制选择个数利用includes判断，所选印章的数组中是否含有相对应的印章选项通过两个条件综合判断，达到限制选择个数的效果
到目前为止，需求实现的差不多了，还差不同类型限制个数不同的实现，这个只需要运用三目运算符来根据不同类型设置最多选择个数。
3、不同类型限制个数不同
根据荣誉类型对应不同的选项限制个数，运用三目运算符
源代码：
<a-checkbox-group v-model:value="formState.certificates_seal_select" name="sealcheckboxGroup"style="margin-top:6px"><a-checkbox value="fmins_work-js" :disabled="(formState.certificates_seal_select.length < (formState.honor_type == 1 ? 2 : 3) || formState.certificates_seal_select.includes('fmins_work-js') == true)? false : true">五分钟讲堂工作室公章 </a-checkbox><a-checkbox value="fmins_trail":disabled="(formState.certificates_seal_select.length < (formState.honor_type == 1 ? 2 : 3) || formState.certificates_seal_select.includes('fmins_trail') == true)? false : true">五分钟讲堂培训专用章</a-checkbox><a-checkbox value="multiple_manager":disabled="(formState.certificates_seal_select.length < (formState.honor_type == 1 ? 2 : 3) || formState.certificates_seal_select.includes('multiple_manager') == true)? false : true">综合管理部公章</a-checkbox><a-checkbox value="ued":disabled="(formState.certificates_seal_select.length < (formState.honor_type == 1 ? 2 : 3) || formState.certificates_seal_select.includes('ued') == true)? false : true">产品与UED部公章</a-checkbox><br/><div style="height:5px"> </div><a-checkbox value="duoduoywh_department":disabled="(formState.certificates_seal_select.length < (formState.honor_type == 1 ? 2 : 3) || formState.certificates_seal_select.includes('duoduoywh_department') == true)? false : true">多多的宇文化工作室公章</a-checkbox><a-checkbox value="dev_and_test":disabled="(formState.certificates_seal_select.length < (formState.honor_type == 1 ? 2 : 3) || formState.certificates_seal_select.includes('dev_and_test') == true)? false : true">技术研发与测试部公章</a-checkbox><a-checkbox value="school_and_media":disabled="(formState.certificates_seal_select.length < (formState.honor_type == 1 ? 2 : 3) || formState.certificates_seal_select.includes('school_and_media') == true)? false : true">校园媒体部公章</a-checkbox><a-checkbox value="learing_and_teaching":disabled="(formState.certificates_seal_select.length < (formState.honor_type == 1 ? 2 : 3) || formState.certificates_seal_select.includes('learning_and_teaching') == true)? false : true">学科教研部公章</a-checkbox></a-checkbox-group>
实现效果：
此时，需求已经全部实现！！在项目中实现多选的组件还有multiple属性的select下拉选择框，那么针对这个select组件，我们又应该如何限制选择的个数呢？下期文章我们详细介绍！
下期文章将介绍vue antd select组件mode="multiple"多选模式下限制选择个数 ~感兴趣的小伙伴可以订阅本专栏，方便后续了解学习~觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~
