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

效果截圖