ElementUI FORM结合Vue实现横向排列表单项

结合Vue实现横向排列表单项

前言

默认的，ElementUI的Form表单项(控件)是垂直排列，即一行显示一个表单项。但是在实际应用中，有时候会需要一行显示多个表单项。针对这类需求，笔者提供以下解决方案

解决方案

1、修改表单项.el-form-item样式

如下，增加display属性，设置值为inline-block !important; 因为默认的，表单项为块元素，这样设置以后，可以让表单项变成内联元素，这样表单项就可以横向排列在一起了

.el-form-item {
  display: inline-block !important;
}

2、修改表单项.el-form-item__label样式

如下，设置display为none，即隐藏自带的表单项标签，然后设置width为0px !important;，避免被隐藏 标签继续占用空间

.el-form-item__label {
  display: none;
  width: 0px !important;
}

这样以后，使用<span>labelName</span>作为自定义标签项

3、修改表单项.el-form-item__content样式

如下，避免表单项在视觉上看上去两头占了很大空白

.el-form-item__content {
  margin-left: 3px !important;
  margin-right: 3px !important;
}

4、使用row和col组件控制哪些表单项归属同一行、同一列

应用举例

  <el-form
    :model="loadSettingsForm"
    :rules="loadSettingsFormRules"
    ref="loadSettingsForm"
    label-width="100px"
    class="load-settings-form"
  >
    <el-row>
      <el-col>
        <span>场景名称</span>
        <el-form-item prop="name">
          <el-input v-model="loadSettingsForm.name" maxlength="50" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <span>是否梯度加压</span>
        <el-form-item>
          <el-radio v-model="loadSettingsForm.isSteppingPressure" :label="true">是</el-radio>
          <el-radio v-model="loadSettingsForm.isSteppingPressure" :label="false">否</el-radio>
        </el-form-item>
      </el-col>
    </el-row>

    <div class="el-form-row-wrapper" v-if="loadSettingsForm.isSteppingPressure">
      <el-row>
        <el-col>
          <span>初始启动</span>
          <el-form-item prop="initialUserNum">
            <el-input
              v-model="loadSettingsForm.initialUserNum"
              maxlength="2"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>个用户，每隔</span>
          <el-form-item prop="interval">
            <el-input
              v-model="loadSettingsForm.interval"
              maxlength="4"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>秒，</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>按每秒启动</span>
          <el-form-item prop="spawnRate">
            <el-input
              v-model="loadSettingsForm.spawnRate"
              maxlength="2"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>个用户的速率增加</span>
          <el-form-item prop="add">
            <el-input
              v-model="loadSettingsForm.add"
              maxlength="2"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>个用户，直至增加到</span>
          <el-form-item prop="targetUserCount">
            <el-input
              v-model="loadSettingsForm.targetUserCount"
              maxlength="6"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>个用户</span>
        </el-col>
      </el-row>
    </div>
    <div class="el-form-row-wrapper" v-else>
      <el-row>
        <el-col>
          <span>按每秒启动</span>
          <el-form-item prop="spawnRate">
            <el-input
              v-model="loadSettingsForm.spawnRate"
              maxlength="2"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>个用户的速率启动</span>
          <el-form-item prop="targetUserCount">
            <el-input
              v-model="loadSettingsForm.targetUserCount"
              maxlength="6"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>个用户</span>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-row>
        <el-col>
          <el-radio
            v-model="loadSettingsForm.loadRunMode"
            :label="1"
            style="margin-right:0px"
          >每个用户运行</el-radio>
          <el-form-item prop="iterationNumEachUser">
            <el-input
              v-model="loadSettingsForm.iterationNumEachUser"
              maxlength="18"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>次</span>
          <el-radio
            v-model="loadSettingsForm.loadRunMode"
            :label="2"
            style="margin-left:20px; margin-right:0px;"
          >持续运行</el-radio>
          <el-form-item prop="holdLoadTime">
            <el-input
              v-model="loadSettingsForm.holdLoadTime"
              maxlength="18"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>秒</span>
        </el-col>
      </el-row>
    </div>
    <div class="el-form-row-wrapper">
      <el-row>
        <el-col>
          <span>在开始下一轮迭代之前</span>
          <el-form-item style="width:80px">
            <el-radio v-model="loadSettingsForm.iterationWaitModel" :label="1">固定等待</el-radio>
          </el-form-item>
          <el-form-item prop="iterationWaitTime">
            <el-input
              v-model="loadSettingsForm.iterationWaitTime"
              maxlength="6"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>秒</span>
          <el-form-item style="width:110px">
            <el-radio
              v-model="loadSettingsForm.iterationWaitModel"
              :label="2"
              style="margin-left:30px"
            >随机等待</el-radio>
          </el-form-item>
          <el-form-item prop="iterationMinWait">
            <el-input
              v-model="loadSettingsForm.iterationMinWait"
              maxlength="6"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>到</span>
          <el-form-item prop="iterationMaxWait">
            <el-input
              v-model="loadSettingsForm.iterationMaxWait"
              maxlength="6"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>秒</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>最后每秒停止</span>
          <el-form-item prop="stopRate">
            <el-input
              v-model="loadSettingsForm.stopRate"
              maxlength="2"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>个用户</span>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col>
        <span>迭代模式</span>
        <el-form-item>
          <el-radio v-model="loadSettingsForm.iterationMode" :label="1">用例串行</el-radio>
          <el-radio v-model="loadSettingsForm.iterationMode" :label="2">用例权重</el-radio>
          <el-radio v-model="loadSettingsForm.iterationMode" :label="3">用例随机</el-radio>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      loadSettingsForm: {
        name: "",
        host: "",
        isSteppingPressure: false, // 是否梯度加压 true-是 否-false
        loadRunMode: 1, // 运行方式 1-按次数运行 2-按时间运行
        initialUserNum: 10,
        interval: 180,
        spawnRate: 5,
        add: 10,
        targetUserCount: 1,
        holdLoadTime: 1800,
        stopRate: 5,
        iterationNumEachUser: 1,
        iterationWaitModel: 1, // 1-固定等待 2-随机等待
        iterationWaitTime: 0,
        iterationMinWait: 0,
        iterationMaxWait: 5,
        iterationMode: 1 //迭代模式 1 - 用例串行 2 - 用例权重 3 - 用例随机
      },
      loadSettingsFormRules: {
        name: [{
          required: true, trigger: "blur", message: "此配置项必填"
        },
        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        targetUserCount: [
          { required: true, message: "此配置项必填", trigger: "blur" }
        ],
        spawnRate: [{ required: true, message: "此配置项必填" }],
        iterationNumEachUser: [
          {
            required: this.loadSettingsForm.loadRunMode == 1,
            message: "此配置项必填",
            trigger: "blur"
          }
        ],
        holdLoadTime: [
          {
            required: !(this.loadSettingsForm.loadRunMode == 1),
            message: "此配置项必填",
            trigger: "blur"
          }
        ],
        stopRate: [
          {
            required: true,
            message: "此配置项必填",
            trigger: "blur"
          }
        ]
      }
    };
  },
  watch: {
    "loadSettingsForm.loadRunMode": {
      handler(newValue, oldValue) {
        this.loadSettingsFormRules.iterationNumEachUser[0].required = !this
          .loadSettingsFormRules.iterationNumEachUser[0].required;

        this.loadSettingsFormRules.holdLoadTime[0].required = !this
          .loadSettingsFormRules.holdLoadTime[0].required;

        this.$nextTick(() => {
          this.$refs.loadSettingsForm.clearValidate();
        })
      },
    },
    "loadSettingsForm.isSteppingPressure": {
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          this.$refs.loadSettingsForm.clearValidate();
        })
      },
    }
  }
};
</script>

<style lang="scss">
.load-settings-form {
  padding-right: 20px;
  padding-left: 20px;
  .el-form-item__label {
    display: none;
    width: 0px !important;
  }
  .el-form-item__content {
    margin-left: 3px !important;
    margin-right: 3px !important;
  }

  .el-form-item {
    display: inline-block !important;
  }

  .el-form-row-wrapper {
    .el-form-item__content {
      width: 85px;
    }
  }
}
</style>

效果截图