element ui 表单

Element UI 是一套基于 Vue.js 2.0 的桌面端组件库，其中包含了表单组件。使用 Element UI 表单可以快速构建出美观、易用的表单页面。

在 Element UI 中，表单组件主要包括 Form、FormItem、Input、Select、Radio、Checkbox 等。其中，Form 是表单的容器，FormItem 是表单项，Input、Select、Radio、Checkbox 等是表单项的具体实现。

以下是一个简单的 Element UI 表单示例：

<template>
  <el-form :model="form" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

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

在这个示例中，我们使用了 el-form、el-form-item 和 el-input 组件来构建一个简单的登录表单。其中，el-form 组件是表单的容器，通过 :model 属性绑定了表单数据对象 form。el-form-item 组件是表单项，通过 label 属性设置了表单项的标签。el-input 组件是表单项的具体实现，通过 v-model 属性绑定了表单项的值。