携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

需求分析

在vue + element ui的项目中，要求在一个大的分类（区间）下，区分出多个子分类（下限、步长、上限...），让它们一行显示，并且这些子分类每个都有各自对应的label标签来进行说明区分，除此以外，各个子分类能输入不同的值，且要每个对子分类进行表单验证，页面上该如何显示？验证该如何做？首先想到的是用element ui的复合型输入框嵌套在form表单中，再调整一下样式来实现。

页面上的具体效果如下图所示：

代码实现

html代码如下：

<el-dialog
      v-dialogDrag
      :visible.sync="basicCalcVisible"
      title="自动"
      :close-on-click-modal="false"
      width="40%"
    >
      <el-form
        ref="basicCalcForm"
        label-width="150px"
        :model="basicCalcForm"
        :rules="rules"
      >
        <div class="multiTextStyle">
          <el-form-item prop="min" class="one" label="区间（m/s）">
            <el-input v-model="basicCalcForm.min">
              <template slot="prepend">下限</template>
            </el-input>
          </el-form-item>
          <el-form-item prop="step" class="two">
            <el-input v-model="basicCalcForm.step">
              <template slot="prepend">步长</template>
            </el-input>
          </el-form-item>
          <el-form-item prop="max" class="three">
            <el-input v-model="basicCalcForm.max">
              <template slot="prepend">上限</template>
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <div style="text-align: right; margin-top: 20px;">
        <el-button type="danger">取消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </el-dialog>

script代码如下：

basicCalcVisible: false,// 弹框
basicCalcForm: {// 表单
    min: '',
    step: '',
    max: ''
},
    
rules: { // 表单验证
    min: [{ required: true, message: '下限不能为空', trigger: 'blur' }],
    step: [{ required: true, message: '步长不能为空', trigger: 'blur' }],
    max: [{ required: true, message: '上限不能为空', trigger: 'blur' }]
}

css样式如下：

// 复合型输入框样式
.multiTextStyle {
	display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    .two .el-form-item__content,
    .three .el-form-item__content{
    	margin-left: 0px !important;
    }
}

总结

在html代码中，一开始为了省事，我把三个复合型input框放在了一个el-form-item标签中，这会导致最后表单验证的时候没办法同时验证三个参数。