效果图如下：

image.png

代码如下：

// template
        <div v-for="(item, idx) in ruleForm.zjList" :key="idx">
          <div class="special">
            <el-form-item :label="`组件名称${idx + 1}`" :prop="'zjList.' + idx + '.zjmc'" :rules="zjlbRules.zjmc"
              class="special-com">
              <el-select v-model="item.zjmc" placeholder="请选择组件" class="self-input">
                <el-option :label="item.label" :value="item.value" v-for="item in modelList" :key="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" :prop="'zjList.' + idx + '.bb'" :rules="zjlbRules.bb" class="special-version"
              label-width="10">
              <el-select v-model="item.bb" placeholder="请选择版本" class="self-input">
                <el-option :label="item.label" :value="item.value" v-for="item in modelList" :key="item.value">
                </el-option>
              </el-select>
              <div style="position: absolute;right: -58px;top: 0;width: 50px;">
                <i class="control el-icon-circle-plus-outline" @click="addComFn"></i>
                <i v-show="ruleForm.zjList.length > 1" class="control el-icon-remove-outline"
                  @click="removeComFn(idx)"></i>
              </div>
            </el-form-item>
          </div>
        </div>

// script
      ruleForm: {
        yrmx: '', 
        zjList: [
          {
            zjmc: '', // 组件名称
            bb: '' // 版本
          },
        ]
      },

      zjlbRules: {
        zjmc: [{ required: true, message: '请选择组件', trigger: 'change' }],
        bb: [{ required: true, message: '请选择版本', trigger: 'change' }],
      },

// style
  .special {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-com {
      width: 63%;
    }

    &-version {
      width: 33%;
    }

    .control {
      font-size: 18px;
      cursor: pointer;
      color: #999999;
      margin-left: 4px;
    }
  }