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

效果截图