ElementUI Form：Form表单

ElementUI的Form组件是一个基于Vue.js的表单解决方案，它提供了表单验证和提交等功能。以下是一个使用ElementUI的Form组件的基本示例：

首先，确保你已经安装并引入了ElementUI。

<template>
  <el-form ref="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() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            alert('提交成功!');
          } else {
            alert('表单验证失败!');
            return false;
          }
        });
      }
    }
  };
</script>

在这个例子中，我们定义了一个带有username和password字段的表单。我们使用el-form组件来包裹表单项，并通过v-model来实现数据双向绑定。提交按钮绑定了一个点击事件，该事件触发submitForm方法。在submitForm方法中，我们使用this.$refs.form.validate来进行表单验证，如果验证通过，则提交表单；否则，不执行任何操作。