Element中el-form表单举例详解

更新时间：2023年01月03日 12:01:48 作者：程序员大阳

Form组件提供了表单验证的功能,只需要通过属性传入约定的验证规则,并将Form-Item的属性设置为需校验的字段名即可,下面这篇文章主要给大家介绍了关于Element中el-form表单的相关资料,需要的朋友可以参考下

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代码进行校验，所以此处不再介绍，感兴趣的可以去官网查看文档。

补充知识：表单的重置清除和触发

resetFields方法：可移除校验结果并重置字段值（注：清除表单项name的校验及数值）
clearValidate方法：只能移除校验结果，不能重置字段值（注：只清除表单项name的校验，不清除表单项name的数值）

//重置整个表单
this.$refs['ruleForm'].resetFields();
//清除整个表单
this.$refs['ruleForm'].clearValidate();
//清除特定属性
this.$refs['ruleForm'].clearValidate('name');
 validateField()方法：触发表单中某一个校验
//触发单个表单验证
this.$refs.form.validateField('propName')
 //element官网 触发一个表单的验证
this.$refs[formName].validate((valid) => {
   if (valid) {
     alert('submit!');
   } else {
     console.log('error submit!!');
     return false;
   }
});

到此这篇关于Element中el-form表单举例详解的文章就介绍到这了,更多相关Element el-form表单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue使用echarts散点图在区域内标点
这篇文章主要为大家详细介绍了Vue使用echarts散点图在区域内标点，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Vue3中使用setup通过ref获取子组件的属性
这篇文章主要介绍了Vue3中使用setup通过ref获取子组件的属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue的异步组件加载的实现方法小结
在 Vue 中,异步组件是指那些在需要时才会被加载的组件,与传统的静态组件不同,异步组件通过动态加载的方式,可以有效地减少初始加载的资源和时间,在 Vue 中实现异步组件加载非常简单,开发者有多种方法可以做到,本文给大家介绍了一些常用的实现方法
2024-11-11
vue实现简单计算商品价格
这篇文章主要为大家详细介绍了vue实现简单计算商品价格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
老生常谈vue2中watch的使用
watch的基本用法是在Vue实例中定义一个watch对象,该对象内部包含需要监听的数据项和对应的回调函数，这篇文章主要介绍了vue2中watch的使用,需要的朋友可以参考下
2024-01-01
vue可视化表单设计器自定义组件使用方法
Vue前端开发中表单组件是排在前三的高频使用的组件,下面这篇文章主要给大家介绍了关于vue可视化表单设计器自定义组件使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
vue的指令和插值总结(非常详细)
这篇文章主要给大家介绍了关于vue指令和插值的相关资料,大家应该对指令和插值都不陌生,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
基于vue封装一个带眼睛的密码子组件
这篇文章给大家介绍了基于vue封装一个带眼睛的密码子组件的方法,文章中有详细的代码讲解,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2023-09-09
Vue计算属性与监视属性详细分析使用
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下
2022-11-11
vue监听路由变化时watch方法会执行多次的原因及解决
这篇文章主要介绍了vue监听路由变化时watch方法会执行多次的原因及解决，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-04-04