Bootstrap

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

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

// 下拉框实现多选 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);
                }
              }
            });
          }
        }
      }
    },
;