先普及一下,下拉框怎么实现多选
// 下拉框实现多选 select标签加一个 multiple 即可
<el-select v-model="value1" multiple placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
比如,
下拉框值:
测试流程1环节1,测试流程1环节2,
测试流程2环节1,测试流程2环节1
多选的时候,每个流程选项选择的时候只能选择一个值,比如选择流程1环节1,再选择流程1环节2,那多选框选中值只保留展示流程1环节2,不保留流程1环节1,选择流程2环节1,则多选框选中值就为“流程1环节2”,“流程2环节1”
// 界面组件先加上change事件
<el-select v-model="value1" multiple placeholder="请选择"
@change="changeValue">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
//js事件
changeValue(val){
// 获得所有下拉框中的值
let allSelect = this.options;
// 已经选中的值
let a = this.value1;
//选中两个值才开始比较
if (a.length > 1) {
let nameStr;
for (let i = 0; i < allSelect.length; i++) {
let item = allSelect[i];
if (item.value=== val[val.length - 1]) {
// 得到选中的值和全部的值匹配得到相对应的name值
let codeName = item.label;
// 截取前5个字
nameStr = codeName.substring(0, 5);
if (!utils.isEmpty(nameStr)) {
break;
}
}
}
//如果截取到值,开始循环选中的值,作比较
if (!utils.isEmpty(nameStr)) {
for (let j = 0; j < a.length - 1; j++) {
let selectItem = a[j];
allSelect.forEach((allItem) => {
if (selectItem === allItem.value) {
let name = allItem.lable.substring(0, 5);
if (nameStr=== name) {
this.value1.splice(j, 1);
}
}
});
}
}
}
},