ElementFORM结合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">
v-model="loadSettingsForm.initialUserNum"
maxlength="2"
oninput="place(/[^\d]/g,'')"
/>
</el-form-item>
<span>个⽤户，每隔</span>
<el-form-item prop="interval">
<el-input
v-model="loadSettingsForm.interval"
maxlength="4"
oninput="place(/[^\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="place(/[^\d]/g,'')"
/>
</el-form-item>
<span>个⽤户的速率增加</span>
<el-form-item prop="add">
<el-input
v-model="loadSettingsForm.add"
maxlength="2"
oninput="place(/[^\d]/g,'')"
/>
</el-form-item>
<span>个⽤户，直⾄增加到</span>
<el-form-item prop="targetUserCount">
<el-input
v-model="loadSettingsForm.targetUserCount"
maxlength="6"
oninput="place(/[^\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="place(/[^\d]/g,'')"
/
>
</el-form-item>
<span>个⽤户的速率启动</span>
<el-form-item prop="targetUserCount">
<el-input
v-model="loadSettingsForm.targetUserCount"
maxlength="6"
oninput="place(/[^\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"
>每个⽤户运⾏</el-radio>
<el-form-item prop="iterationNumEachUser">
<el-input
v-model="loadSettingsForm.iterationNumEachUser"              maxlength="18"
oninput="place(/[^\d]/g,'')"
</el-form-item>
<span>次</span>
<el-radio
v-model="loadSettingsForm.loadRunMode"
:label="2"
>持续运⾏</el-radio>
<el-form-item prop="holdLoadTime">
<el-input
v-model="loadSettingsForm.holdLoadTime"
maxlength="18"
oninput="place(/[^\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 >
<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="place(/[^\d]/g,'')"
/>
</el-form-item>
<span>秒</span>
<el-form-item >
<el-radio
v-model="loadSettingsForm.iterationWaitModel"
:label="2"
>随机等待</el-radio>
</el-form-item>
<el-form-item prop="iterationMinWait">
<el-input
v-model="loadSettingsForm.iterationMinWait"
maxlength="6"
oninput="place(/[^\d]/g,'')"
/>
</el-form-item>
<span>到</span>
<el-form-item prop="iterationMaxWait">
<el-input
v-model="loadSettingsForm.iterationMaxWait"
maxlength="6"
oninput="place(/[^\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="place(/[^\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>
<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-随机等待
margin rateiterationWaitTime: 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>
.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>
效果截图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。