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