html表单元素横向分布,Element FORM结合Vue实现横向排列表单项

87 阅读 0 评论 58 点赞

我是靠谱客的博主欣慰西牛，最近开发中收集的这篇文章主要介绍html表单元素横向分布,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组件控制哪些表单项归属同一行、同一列

应用举例

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。