因为 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>