【vue】Ant Design Vue组件中的Select 选择器实现全选/全不选功能

因为 Ant Design Vue 组件中的 Select 是没有全选/全不选功能的，但是项目中有这个需求，而且确实方便，于是就自己简单的自定义了一下，最终实现效果如下：
点击全选后，下拉框中的选项会全部选中，再点一次全选，下拉框中的选项会移除

实现代码如下：

<template>
	<a-form-model-item
        label="所属xx"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-select
          v-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 = res
		      this.model.workType = this.checkAll(val, this.options)
			},
			// 全选/全不选
			checkAll(arr, modelList) {
		      // arr是onChange中的val数组 modelList是下拉框List
		      let length = arr.length
		      let 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>