因为 Ant Design Vue 组件中的 Select 是没有全选/全不选功能的，但是项目中有这个需求，而且确实方便，于是就自己简单的自定义了一下，最终实现效果如下：
点击全选后，下拉框中的选项会全部选中，再点一次全选，下拉框中的选项会移除
实现代码如下：
<template><a-form-model-itemlabel="所属xx":labelCol="labelCol":wrapperCol="wrapperCol"><a-selectv-model="model.workType"mode="multiple"placeholder="请选择xx"style="width:88%"showArrow@change="onChange"><!-- 这个是自定义的一个全选项，展示在所有下拉项的顶部位置 --><a-select-option value="0" key="0">全选</a-select-option><!-- 下面的是正常要循环渲染的下拉项 --><a-select-option v-for="item in options" :value="item.title">{{ item.title }}</a-select-option></a-select></a-form-model-item></template><script>export default {data() {return {model: {workType:[],},labelCol: {xs: {span: 24 },sm: {span: 5 }},wrapperCol: {xs: {span: 24 },sm: {span: 16 }},options: [{title:'测试1'},{title:'测试2'},{title:'测试3'},{title:'测试4'}],// 处理选择好的workType数据格式，因为我这边后端需要的格式是字符串类型，并以逗号分隔jobsStr: ''}},created() {this.initOptions()},methods: {// 掉接口，获取下拉框数据赋值给options即可initOptions() {// axios请求获取数据......},onChange(val) {// val 拿到的是数组格式的数据，比如：['测试1','测试3']const res = this.model.workType.join(',')this.jobsStr = resthis.model.workType = this.checkAll(val, this.options)},// 全选/全不选checkAll(arr, modelList) {// arr是onChange中的val数组 modelList是下拉框Listlet length = arr.lengthlet list = arr// 遍历已经选中的选项arr.forEach(element => {// 当数组中存在0，说明此时进行全选/取消全选if (element === '0') {// 当数组长度为最大长度且最后一个元素为0时，说明此时在全选的基础上又点击全选，则取消全选if (length - 1 === modelList.length && arr[length - 1] === '0') {list = []// 取消全选时，jobsStr需要重置为空，否则全选的数据还会展示在下拉输入框中this.jobsStr = ''} else {// 当不是取消全选操作，只要数组中出现了0则说明进行了全选操作list = []for (let i in modelList) {list.push(modelList[i].title)// 全选时，也需要给jobsStr 赋值，拿到所有的下拉选项，并进行数据格式转换this.jobsStr = list.join(',')}}}})return list}}}</script>
