HTML5UI横向排列,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;

}

这样以后，使用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="value=value.replace(/[^d]/g,'')"

/>

个用户，每隔

v-model="loadSettingsForm.interval"

maxlength="4"

οninput="value=value.replace(/[^d]/g,'')"

/>

秒，

按每秒启动

v-model="loadSettingsForm.spawnRate"

maxlength="2"

οninput="value=value.replace(/[^d]/g,'')"

/>

个用户的速率增加

v-model="loadSettingsForm.add"

maxlength="2"

οninput="value=value.replace(/[^d]/g,'')"

/>

个用户，直至增加到

v-model="loadSettingsForm.targetUserCount"

maxlength="6"

οninput="value=value.replace(/[^d]/g,'')"

/>

个用户

按每秒启动

v-model="loadSettingsForm.spawnRate"

maxlength="2"

οninput="value=value.replace(/[^d]/g,'')"

/>

个用户的速率启动

v-model="loadSettingsForm.targetUserCount"

maxlength="6"

οninput="value=value.replace(/[^d]/g,'')"

/>

个用户

v-model="loadSettingsForm.loadRunMode"

:label="1"

style="margin-right:0px"

>每个用户运行

v-model="loadSettingsForm.iterationNumEachUser"

maxlength="18"

οninput="value=value.replace(/[^d]/g,'')"

/>

次

v-model="loadSettingsForm.loadRunMode"

:label="2"

style="margin-left:20px; margin-right:0px;"

>持续运行

v-model="loadSettingsForm.holdLoadTime"

maxlength="18"

οninput="value=value.replace(/[^d]/g,'')"

/>

秒

在开始下一轮迭代之前

固定等待

v-model="loadSettingsForm.iterationWaitTime"

maxlength="6"

οninput="value=value.replace(/[^d]/g,'')"

/>

秒

v-model="loadSettingsForm.iterationWaitModel"

:label="2"

style="margin-left:30px"

>随机等待

v-model="loadSettingsForm.iterationMinWait"

maxlength="6"

οninput="value=value.replace(/[^d]/g,'')"

/>

到

v-model="loadSettingsForm.iterationMaxWait"

maxlength="6"

οninput="value=value.replace(/[^d]/g,'')"

/>

秒

最后每秒停止

v-model="loadSettingsForm.stopRate"

maxlength="2"

οninput="value=value.replace(/[^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: [

{

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();

})

},

}

}

};

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

}

}

}

效果截图

内容来源于网络如有侵权请私信删除