Vue 多选下拉框值每组名字的只能选一个

先普及一下，下拉框怎么实现多选

// 下拉框实现多选 select标签加一个 multiple 即可 

    
    
  
1
2
3
4
5
6
7
8
9

比如，
下拉框值：
测试流程1环节1，测试流程1环节2，
测试流程2环节1，测试流程2环节1
多选的时候，每个流程选项选择的时候只能选择一个值，比如选择流程1环节1，再选择流程1环节2，那多选框选中值只保留展示流程1环节2，不保留流程1环节1，选择流程2环节1，则多选框选中值就为“流程1环节2”，“流程2环节1”

// 界面组件先加上change事件

    
    
  
//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);
                }
              }
            });
          }
        }
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47