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标签包裹起来,这样产生的表单就会比较整齐。

image.png

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>

效果如下:

image.png

4. 标签对齐方式

可以统一控制表单控件标签文本的对齐方式,包括左对齐、右对齐、顶部对齐,通过将label-position属性值设置为left/right/top即可实现,具体效果如下:

image.png

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>

效果如下,与正常尺寸相比,控件都变小了。

image.png

6. 小结

el-form除了提供样式方面的功能,也提供了校验方面的功能,我个人还是比较喜欢使用JS代码进行校验,所以此处不再介绍,感兴趣的可以去官网查看文档。

相关文章
|
编解码 前端开发
Element el-row el-col 布局组件详解
本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对齐方式 5. 响应式布局 6. 小结
5936 0
Element el-row el-col 布局组件详解
|
JSON JavaScript 数据格式
proxy error: could not proxy request解决方案
proxy error: could not proxy request解决方案
10139 5
proxy error: could not proxy request解决方案
|
JavaScript 前端开发 API
core-js介绍及安装使用
core-js介绍及安装使用
core-js介绍及安装使用
element ui table 表格高度自适应
设置element ui table 表格高度自适应
2180 0
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
4969 0
Element el-date-picker 日期选择器详解
|
JavaScript
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
562 0
element-ui的el-table与el-form的使用与表单校验
element-ui的el-table与el-form的使用与表单校验
element-ui的el-table与el-form的使用与表单校验
|
JavaScript
vue跳转到新页面
vue跳转到新页面
302 0
el-form中error重复错误只显示一次
el-form中el-form-item的error属性监听的是watch方法,也就是两次重复的错误操作,提示的错误信息一致,就不会触发watch方法。 就会导致第一次获取error信息,信息正常显示在了页面中,第二次获取到了同样的error信息,信息却不显示在页面中了。
665 0
el-select 数据回显,只显示value不显示lable
el-select 数据回显,只显示value不显示lable
el-select 数据回显,只显示value不显示lable