vue基础：ElementUI的表单

最新推荐文章于 2025-06-11 12:21:17 发布

m0_54883970

最新推荐文章于 2025-06-11 12:21:17 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 html 文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/m0_54883970/article/details/123372356

本文详细介绍了ElementUI中的表单使用，包括一个简单的表单案例、主要的表单组件、组件的使用方法、行内表单、对齐方式、表单验证、自定义验证规则、表单内组件尺寸控制、form模块的属性和方法。此外，还讲解了form-item模块的重要属性，如prop、label、rules等，帮助开发者更好地理解和运用ElementUI的表单功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

ElementUI表单

ElementUI表单

el的表单官网内容很多，看了一眼觉得心累了。但实际上它使用起来非常的方便,el为我们封装了各种组件，样式也大众。

一个简单的案例

请添加图片描述

代码如下（使用时确保引入了相关的组件）

<template>
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="用户名"><!-- form-item用于显示关联的文件 -->
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="password" v-model="form.pwd"></el-input>
  </el-form-item>
      <el-form-item>
    <el-button type="primary" @click="onSubmit">登录</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          pwd:''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

看起来还是挺多行是吗去掉些必要标签还有些声明，剩下的是：el-form,el-input,el-form-item三个组件。