【Element入门】3、Element UI 表单组件详解

【Element入门】表单组件详解

Element入门系列导航

【Element入门】1、Element UI 介绍与安装
【Element入门】2、Element UI 的基本使用
【Element入门】3、Element UI 表单组件详解（本文）
【Element入门】4、Element UI 布局组件详解
【Element入门】5、Element UI 导航组件详解
【Element入门】6、Element UI 数据展示组件详解
【Element入门】7、Element UI 反馈组件详解
【Element入门】8、Element UI 自定义主题

前言

表单是 Web 应用中最常见的交互形式之一，几乎每个项目都会涉及到表单的创建和处理。Element UI 提供了强大的表单组件，可以帮助我们快速构建表单并实现复杂的表单验证和提交逻辑。本篇文章将详细介绍 Element UI 中的 Form 组件的基本使用方法，以及如何实现表单验证与提交。

Form组件基本使用

创建基础表单

Element UI 提供的 el-form 组件可以帮助我们快速创建表单。在 el-form 组件中，我们可以使用 el-form-item 组件来定义表单项，el-input 等其他组件来实现具体的表单控件。

<template>
  <div id="app">
    <el-form :model="form" label-width="120px">
      <el-form-item label="Username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('Form data:', this.form);
    }
  }
};
</script>

在上述代码中，我们创建了一个包含用户名、电子邮件和密码输入框的表单，并在点击提交按钮时输出表单数据。

表单布局

在 el-form-item 组件中，我们可以通过 label 属性设置表单项的标签，通过 label-width 属性设置标签的宽度。Element UI 还提供了多种布局方式，如行内布局和分栏布局等。

行内布局

我们可以通过设置 inline 属性来实现行内布局：

<template>
  <div id="app">
    <el-form :model="form" inline label-width="120px">
      <el-form-item label="Username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

分栏布局

我们可以使用 el-row 和 el-col 组件来实现分栏布局：

<template>
  <div id="app">
    <el-form :model="form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="First Name">
            <el-input v-model="form.firstName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Last Name">
            <el-input v-model="form.lastName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="Email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item>