html表单元素横向分布,ElementFORM结合Vue实现横向排列
表单项
结合Vue实现横向排列表单项
前⾔
默认的，ElementUI的Form表单项(控件)是垂直排列，即⼀⾏显⽰⼀个表单项。但是在实际应⽤中，有时候会需要⼀⾏显⽰多个表单项。针对这类需求，笔者提供以下解决⽅案
解决⽅案margin rate
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;
}
这样以后，使⽤labelName作为⾃定义标签项
3、修改表单项.el-form-item__content样式
如下，避免表单项在视觉上看上去两头占了很⼤空⽩.el-form-item__content {
margin-left: 3px !important;
margin-right: 3px !important;
}
4、使⽤row和col组件控制哪些表单项归属同⼀⾏、同⼀列
应⽤举例
:model="loadSettingsForm"
:rules="loadSettingsFormRules"
ref="loadSettingsForm"
label-width="100px"
class="load-settings-form"
>
场景名称
是否梯度加压
是
否
初始启动
v-model="loadSettingsForm.initialUserNum" maxlength="2"
οninput="place(/[^\d]/g,'')" />
个⽤户，每隔
v-model="loadSettingsForm.interval" maxlength="4"
οninput="place(/[^\d]/g,'')" />
秒，
按每秒启动
v-model="loadSettingsForm.spawnRate" maxlength="2"
οninput="place(/[^\d]/g,'')" />
个⽤户的速率增加
v-model="loadSettingsForm.add"
maxlength="2"
οninput="place(/[^\d]/g,'')" />
个⽤户，直⾄增加到
v-model="loadSettingsForm.targetUserCount" maxlength="6"
οninput="place(/[^\d]/g,'')" />
个⽤户
按每秒启动
v-model="loadSettingsForm.spawnRate" maxlength="2"
οninput="place(/[^\d]/g,'')" />
个⽤户的速率启动
v-model="loadSettingsForm.targetUserCount" maxlength="6"
οninput="place(/[^\d]/g,'')"
/>
个⽤户
v-model="loadSettingsForm.loadRunMode"
:label="1"
>每个⽤户运⾏
v-model="loadSettingsForm.iterationNumEachUser" maxlength="18"
οninput="place(/[^\d]/g,'')"
/>
次
v-model="loadSettingsForm.loadRunMode"
:label="2"
>持续运⾏
v-model="loadSettingsForm.holdLoadTime" maxlength="18"
οninput="place(/[^\d]/g,'')"
/>
秒
在开始下⼀轮迭代之前
固定等待
v-model="loadSettingsForm.iterationWaitTime" maxlength="6"
οninput="place(/[^\d]/g,'')"
/>
秒
v-model="loadSettingsForm.iterationWaitModel"
:label="2"
>随机等待
v-model="loadSettingsForm.iterationMinWait"
maxlength="6"
οninput="place(/[^\d]/g,'')"
/>
到
v-model="loadSettingsForm.iterationMaxWait"
maxlength="6"
οninput="place(/[^\d]/g,'')"
/>
秒
最后每秒停⽌
v-model="loadSettingsForm.stopRate"
maxlength="2"
οninput="place(/[^\d]/g,'')"
/>
个⽤户
迭代模式
⽤例串⾏
⽤例权重
⽤例随机
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: [

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