关于如何通过elementui的下拉框（el-select）实现同组共同选择、不同组互斥的简单实现_el 下拉框

首先贴上效果图，如下：（下面新增了个用分组把每一组分开的，大概会好看点）

 这是简单的把同组选项归为一类的解决方案，难的我是真不大会做，因为不会控制input的内容，如果大佬有更好的解决方案可以评论区留言~

1、先贴一下代码和实例数据

<el-select clearable
  v-model="form.testGroup"
  ref="mySelect"
  style="width: 90%"
  placeholder="请选择">
  <el-option v-for="group in testGroupSelect" :key="group.id" :label="group.names" :value="group.names">
    <div v-for="(item,index) in group.name" :key="index"  style="margin-left: 10px">
     {{item}}
    </div>
  </el-option>
</el-select>
 
testGroupSelect: [{
            id:'id1',
            name:['k1','k2'],
            names:'k1、k2'
          },
          {
            id:'id2',
            name:['k3','k4'],
            names:'k3、k4'
          },
          {
            id:'id3',
            name: ['k5'],
            names:'k5'
          }
        ],

附上几点有用的知识：

1、:value在每个form组件中应该是唯一的吧，因为他应该是负责给form表单传值用的，多了就乱了

2、el-option这一行的 :value是绑定的提交给表单的值，因为这个下拉框肯定是给表单用的嘛，传的值就是这个value绑定的，比如如上代码我绑定的就是names，也就是我选中k1 k2的时候，提交到表单的是'k1、k2'这个值，如果你想提交id作为表单的值，改成:value='group.id'即可，这样就可以得到本表存id，跨表拿name，拿name方法如下：

这个testGroupSelect的数据结构还蛮奇怪的，在后端如果要从id1 , k1 、 id2 , k2这样的结构转过来还挺费劲，下面贴上我的转换方法

List<Vo> list = 获取到的数据
        List<TestGroupSelect> testGroup = new ArrayList<>(); // 这个TestGroupSelect和上面示例数据结构一致，我就不贴了，
        for (Vo vo : list) {
            if (testGroup.size() == 0){
                // 为空则创建一个新对象
                testGroup.add(newTestGroupSelect(vo));
                continue;
            }
            boolean ifNew = true;
            // 有同id则添加
            for (TestGroupSelect testGroupSelect : testGroup) {
                if (vo.getTestGroup().equals(testGroupSelect.getId())){
                    testGroupSelect.getName().add(vo.getName());
                    ifNew=false;
                    break;
                }
            }
            if (ifNew){
                // 无则新增
                testGroup.add(newTestGroupSelect(vo));
            }
        }
        // 完善names
        for (TestGroupSelect testGroupSelect : testGroup) {
            StringBuilder stringBuffer = new StringBuilder();
            for (String s : testGroupSelect.getName()) {
                stringBuffer.append(s);
                stringBuffer.append("、");
            }
            stringBuffer.delete(stringBuffer.length()-1,stringBuffer.length());
            testGroupSelect.setNames(String.valueOf(stringBuffer));
        }

这样的话就可以将testGroupSelect作为一个字典或者索引一样的东西来显示我们需要的内容，然后在前端表单显示会显示的id，我们只要在onLoad，也就是获取整体表单数据的时候通过这个testGroupSelect去进行下数据处理，代码示例如下：

data.records.forEach((item) => {
            this.testGroupSelect.forEach((list) => {
              if (item.testGroup==list.id){
                item.testGroup=list.names
              }
              })
            })
// 其中data.records存的就是我们后台传上来的的表单数据，用forEach对其进行处理

这属于是个耍小聪明的解决方案，不过还凑合，能用就行嘿嘿~~

新增一个能分组的，视觉效果好一点，效果如下~

如下是改完的前端代码，上面的示例是

<el-option-group v-for="items in testGroupSelect" :key="testGroupSelect.id">
    <el-option :label="items.names" :key="items.id" :value="items.id">
        <div v-for="(item,index) in items.name"  style="margin-left: 10px">
            {{item}}
        </div>
    </el-option>
</el-option-group>

如果对你有帮助点个赞啊~~~