效果截图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f5110817de7f6c53eee13eb54aa76b53.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6689bd0a992847b0047f692992e8d9c2.png)
<template>
<div>
<span>专业:</span>
<el-select
multiple
collapse-tags
@change="specialityNoChange"
:value="specialityNoList"
>
<el-option :key="-999" label="全选" :value="-999"></el-option>
<el-option
v-for="item in specialityList"
:key="item.specialityNo"
:label="item.specialityName"
:value="item.specialityNo"
>
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectQueryList: {
specialityNoList: [],
},
specialityNoList: [],
specialityList: [
{
specialityName: "建筑",
specialityNo: "ZY0001",
},
{
specialityName: "总图",
specialityNo: "SZY0046",
},
{
specialityName: "结构",
specialityNo: "ZY0003",
},
{
specialityName: "给排水",
specialityNo: "ZY0004",
},
{
specialityName: "暖通",
specialityNo: "ZY0006",
},
{
specialityName: "燃气",
specialityNo: "SZY0005",
},
{
specialityName: "电气",
specialityNo: "ZY0005",
},
{
specialityName: "弱电",
specialityNo: "SZY0003",
},
{
specialityName: "消防电",
specialityNo: "SZY0045",
},
{
specialityName: "智能化",
specialityNo: "SZY0004",
},
{
specialityName: "BIM",
specialityNo: "ZY0011",
},
{
specialityName: "土石方工程",
specialityNo: "ZY0030",
},
],
};
},
methods: {
specialityNoChange(val) {
const list = this.specialityList;
const idList = list.map((el) => el.specialityNo);
if (val.indexOf(-999) >= 0) {
if (
this.specialityNoList.indexOf(-999) >= 0 &&
val.length === list.length
) {
val.splice(0, 1);
this.specialityNoList = val;
} else {
this.specialityNoList = [-999, ...idList];
}
} else {
if (val.length === list.length) {
if (this.specialityNoList.indexOf(-999) >= 0) {
this.specialityNoList = [];
} else {
this.specialityNoList = [-999, ...val];
}
} else {
this.specialityNoList = val;
}
}
this.selectQueryList.specialityNoList = this.specialityNoList.filter(
(e) => e != -999
);
this.$nextTick(() => {
console.log(this.selectQueryList);
});
},
},
};
</script>