T O P

[资源分享]     Element FORM结合Vue实现横向排列表单项

  • By - 楼主

  • 2021-03-28 00:00:22
  • 结合Vue实现横向排列表单项

    前言

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

    解决方案

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

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

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

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

    如下,设置displaynone,即隐藏自带的表单项标签,然后设置width0px !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、使用rowcol组件控制哪些表单项归属同一行、同一列

    应用举例

      <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>
    

    效果截图

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册