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

首先贴上效果图，如下：

 这是简单的把同组选项归为一类的解决方案，难的我是真不大会做，因为不会控制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'
          }
        ],

附上几点有用的知识：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
              }
            })
            if (!(item.filename=='')){
              item.fileName = item.filename.split("&&")
              item.fileUrl = item.fileurl.split("&&")
            }
          })
// 其中data.records存的就是我们的表单数据，用Group对其进行处理

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

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