<el-form-item label="协议" prop="protocolType">
<!-- <el-input v-model="submitForm.deviceName" placeholder="请输入名称" /> -->
<el-select
multiple
collapse-tags
v-model="submitForm.protocolType"
filterable
clearable
@change="protocolTypeChange"
placeholder="请选择协议"
>
<el-option
v-for="item in protocolTypeOption"
:key="item.code"
:label="item.codeName"
:value="item.code"
></el-option>
</el-select>
</el-form-item>
protocolTypeChange(val) {
const allValues = this.protocolTypeOption.map(item => {
return item.code;
});
// 储存上一次选择的值,进行对比
const oldVal = this.oldChooseData.length > 0 ? this.oldChooseData : [];
// 若选择全部
if (val.includes("any")) {
this.submitForm.protocolType = [...allValues];
}
// 取消全部选中, 上次有, 当前没有, 表示取消全选
if (oldVal.includes("any") && !val.includes("any")) {
this.submitForm.protocolType = [];
}
// 点击非全部选中,需要排除全部选中 以及 当前点击的选项
// 新老数据都有全部选中
if (oldVal.includes("any") && val.includes("any")) {
const index = val.indexOf("any");
val.splice(index, 1); // 排除全选选项
this.submitForm.protocolType = val;
}
// 全选未选,但是其他选项都全部选上了,则全选选上
if (!oldVal.includes("any") && !val.includes("any")) {
if (val.length === allValues.length - 1) {
this.submitForm.protocolType = ["any"].concat(val);
}
}
// 储存当前选择结果 作为下次的老数据
this.oldChooseData = [...this.submitForm.protocolType];
}
},
submit时,使用splice将最终值中的any 删除