Vue基础之详解ElementUI的表单攻略

ElementUI是基于Vue.js的一套UI框架，其中表单组件是使用频率非常高的组件之一。本文将详细讲解ElementUI表单组件的使用方法。

表单基础

在使用ElementUI表单组件之前，需要先引入ElementUI组件库。

<!-- 引入ElementUI CSS -->
<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入Vue.js -->
<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 引入ElementUI JS -->
<script src="//unpkg.com/element-ui/lib/index.js"></script>

表单组件的基本结构如下：

<el-form :label-position="form.labelPosition" :label-width="form.labelWidth" :model="form">
  <el-form-item label="名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="邮箱">
    <el-input v-model="form.email"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submit">提交</el-button>
  </el-form-item>
</el-form>

在上面的代码中，form 是一个对象，包含了表单中所有的数据。使用 v-model 指令将表单控件与对象中的属性绑定。在提交表单时，只需要调用 submit 方法即可。

示例代码：https://codepen.io/anon/pen/YzXeJNv

表单验证

在实际的开发中，表单验证是必不可少的。ElementUI支持多种表单验证方式，包括同步验证和异步验证。

同步验证需要使用 rules 属性，如下所示：

<el-form :label-position="form.labelPosition" :label-width="form.labelWidth" :model="form" :rules="rules">
  <el-form-item label="名称" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="form.email"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submit">提交</el-button>
  </el-form-item>
</el-form>

在上面的代码中，rules 是一个对象数组，每个对象表示一个表单项的验证规则。prop 属性是验证规则的名称，必须和 v-model 绑定的数据属性相同。

示例代码：https://codepen.io/anon/pen/ExaVYJm

异步验证需要使用 async-validator 库。具体使用方法可以参考 https://github.com/yiminghe/async-validator。

自定义表单控件

虽然ElementUI提供了很多常用的表单控件，但在实际开发中，我们常常需要自定义表单控件。ElementUI支持使用 el-form-item 的 slot 插槽来实现自定义表单控件。

例如，我们可以实现一个可编辑的下拉菜单控件：

<el-form :label-position="form.labelPosition" :label-width="form.labelWidth" :model="form">
  <el-form-item label="状态">
    <editable-select v-model="form.status" :options="statusOptions"></editable-select>
  </el-form-item>
  <el-form-item label="内容">
    <el-input v-model="form.content"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submit">提交</el-button>
  </el-form-item>
</el-form>

在上面的代码中， editable-select 是自定义的表单控件。它可以通过 slot 插槽来嵌入到 el-form-item 中。

示例代码：https://codepen.io/anon/pen/KKPEjyQ