Element el-form 表单详解
点此查看全部文字教程、视频教程、源代码
本文目录
- 1. 前言
- 2. 基本用法
- 3. 行内表单
- 4. 标签对齐方式
- 5. 调整尺寸
- 6. 小结
1. 前言
表单是使用频率非常高的组件了,HTML默认提供的表单是没啥样式的,而Element对表单提供了封装形成了el-form组件,使整个表单的样式整齐划一。
本篇就来介绍下表单的使用,主要介绍的是样式方面的使用。
2. 基本用法
代码:
基本用法:<el-form ref="form" label-width="80px" style="border:1px solid #C4E1C5;padding:20px;"><el-form-item label="姓名"><el-input v-model="user.name"></el-input></el-form-item><el-form-item label="班级"><el-select v-model="user.classId"><el-option label="1班" value="1001"></el-option><el-option label="2班" value="1002"></el-option></el-select></el-form-item><el-form-item label="出生日期"><el-date-picker type="date" placeholder="选择日期" v-model="user.date"></el-date-picker></el-form-item><el-form-item label="性别"><el-radio-group v-model="user.sex"><el-radio label="男" value="male"></el-radio><el-radio label="女" value="female"></el-radio></el-radio-group></el-form-item><el-form-item label="自我介绍"><el-input type="textarea" v-model="user.desc"></el-input></el-form-item><el-form-item><el-button type="primary">提交</el-button><el-button>取消</el-button></el-form-item></el-form>
需要用el-form标签将表单控件包裹起来,每个控件使用el-form-item标签包裹起来,这样产生的表单就会比较整齐。
3. 行内表单
有时候希望将表单的控件尽量显示到一行,以节约空间,借助inline属性即可实现。
行内表单:<el-form ref="form" label-width="80px" :inline="true" style="border:1px solid #C4E1C5;padding:20px;"><el-form-item label="姓名"><el-input v-model="user.name"></el-input></el-form-item><el-form-item label="选择班级"><el-select v-model="user.classId"><el-option label="1班" value="1001"></el-option><el-option label="2班" value="1002"></el-option></el-select></el-form-item><el-form-item><el-button type="primary">提交</el-button><el-button>取消</el-button></el-form-item></el-form>
效果如下:
4. 标签对齐方式
可以统一控制表单控件标签文本的对齐方式,包括左对齐、右对齐、顶部对齐,通过将label-position
属性值设置为left/right/top即可实现,具体效果如下:
5. 调整尺寸
可以通过为表单设置size
属性,一次性设置表单内所有控件的属性,size可取值为medium / small / mini。
如下代码:
调整尺寸:<el-form ref="form" label-width="80px" size="mini" style="border:1px solid #C4E1C5;padding:20px;"><el-form-item label="姓名"><el-input v-model="user.name"></el-input></el-form-item><el-form-item label="选择班级"><el-select v-model="user.classId"><el-option label="1班" value="1001"></el-option><el-option label="2班" value="1002"></el-option></el-select></el-form-item><el-form-item><el-button type="primary">提交</el-button><el-button>取消</el-button></el-form-item></el-form>
效果如下,与正常尺寸相比,控件都变小了。
6. 小结
el-form除了提供样式方面的功能,也提供了校验方面的功能,我个人还是比较喜欢使用JS代码进行校验,所以此处不再介绍,感兴趣的可以去官网查看文档。
Element el-form 表单详解相关推荐
- HTML第三章 form表单(详解,内含详细代码示例)
目录 1.特点 2. 表单的语法和属性 3. input元素 4. select和下拉选择框 5. textarea多行文本域 6.label关联控件 每日一句 1.特点 提供了一些可视化的输入控件 ...
- Form 表单详解:案例、CSS 美化
本文要点: 常见表单 表单的性质 表单CSS美化 使用 radio 实现 Tab 选项卡 什么是表单 用户通过表单填写信息,然后通过计算机网络传送给服务器.表单标签不是一个标签,而是一组标签,因为不同 ...
- js入门·表单详解一(修改表单属性,修改表单元素值)
实在javascript入门·Document对象入门讲解(访问表单,创建新页,获取页标题) 一文中,我们已经把表单的一些基本访问等弄清楚了,下面我们深入的学下表单的属性以及对表单元素的简单操作! 演 ...
- element实现form表单动态添加email效果
前言: vue中使用element实现form表单动态添加email效果 效果: 实现步骤: 实现源代码: <template><div><el-form ref=&qu ...
- form提交后台注解拿不到数据_Form表单详解
主要内容Form表单.表单元素.表单元素的属性.HTML5新增type类型和HTML新增属性 知乎视频www.zhihu.com 知乎视频www.zhihu.com 知乎视频www.zhihu. ...
- Element Ui使用技巧——Form表单的校验规则rules详细说明;element的 form 表单rules详细用法
本文章是在项目开发时遇到问题看到的一片好文, 摘录自[博客园]–[逍遥云天]. 感谢作者 地址 – https://www.cnblogs.com/xyyt/p/13366812.html 在 [逍遥 ...
- 基于vue3 element plus form 表单的二次封装
记录一下开发中对form表单的二次封装及使用 前言 在我们的日常工作中经常会使用到form表来满足提交需求,那么将form表单封装成组件将会大大提高我们的工作效率,避免更多重复代码的书写,只需一些简单 ...
- 菜鸟教程:HTML表单详解
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.表单元素form 二.form元素的属性 1.action 2.method 3.enctype 4.注意事项 三 ...
- 上传多张图片的html表单,element在form表单里上传多张张图片
1.template里面 title="新增" :visible.sync="Visible" width="30%" > ref=& ...
- element中form表单resetFields()方法重置表单无效
官方文档 // 调用resetFields但没有生效 resetForm() {this.$refs['form'].resetFields(); } 解决: form里需要ref 表单项el-for ...
最新文章
- Keras神经网络集成技术
- SQL与NoSQL区别-存储结构
- python3 多级目录建立 os.makedirs()
- 二维码QR Code不是一个产品,是一个功能
- SAP SD:SAP信贷出口
- 全球品牌百强榜单出炉:中国品牌仅有华为上榜
- css3 页面翻转效果.
- Use a production WSGI server instead(搭建web网站出现的问题)
- 【2019徐州网络赛:M】Longest subsequence(思维+构造)
- 小米球Ngrok-使用方法
- 光学设计软件ZEMAX的安装与基本操作
- 第21章 深入理解IsPersistent、IhttpContextAccessor和UseDefaultServiceProvider
- WebStorm2016.1.1免注册破解方法
- 杰理之手机同步时间接口【篇】
- 【洛谷】P2006 赵神牛的游戏 c++
- 使用Unity编写传统ARPG游戏人物操作方式(二)
- 自媒体领域选择大全,自媒体新手参考资料
- QML < 5 > QML 访问C++ 类 (函数Q_INVOKABLE、枚举Q_ENUMS 、成员变量Q_PROPERTY、自定义结构体QVariantMap、List数据QVariantL
- 基于ELK的日志系统最佳实践
- 服务端渲染VUE_SSR