本文主要是介绍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组件控制哪些表单项归属同一行、同一列
应用举例场景名称
是否梯度加压
是否初始启动
个用户，每隔
秒，
按每秒启动
个用户的速率增加
个用户，直至增加到
个用户
按每秒启动
个用户的速率启动
个用户
每个用户运行次
持续运行秒
在开始下一轮迭代之前
固定等待秒
随机等待到
秒
最后每秒停止
个用户
迭代模式
用例串行用例权重用例随机 {
this.$refs.loadSettingsForm.clearValidate();
})
},
},
"loadSettingsForm.isSteppingPressure": {
handler(newValue, oldValue) {
this.$nextTick(() => {
this.$refs.loadSettingsForm.clearValidate();
})
},
}
}
};" _ue_custom_node_="true">
效果截图
这篇关于HTML5UI横向排列,Element FORM结合Vue实现横向排列表单项的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
