ElementUI实现表单数据提交

ElementUI 是一个基于 Vue.js 的高质量 UI 组件库，由饿了么前端团队开发和维护。它为开发者提供了一系列丰富、灵活且易于使用的组件，帮助开发者快速构建出美观且功能强大的 Web 应用程序。ElementUI 提供了包括布局、导航、表单、数据展示等一系列常用的 UI 组件，同时也支持按需加载和自定义主题等功能，使得开发者可以更加高效地进行开发。

以下是一个使用 ElementUI 的简单示例代码，展示了一个包含输入框和按钮的表单：

<template>  
  <el-form ref="form" :model="form" label-width="120px">  
    <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('form')">提交</el-button>  
    </el-form-item>  
  </el-form>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      form: {  
        username: '',  
        password: ''  
      }  
    };  
  },  
  methods: {  
    submitForm(formName) {  
      this.$refs[formName].validate((valid) => {  
        if (valid) {  
          alert('提交成功！');  
        } else {  
          console.log('表单验证失败！');  
          return false;  
        }  
      });  
    }  
  }  
};  
</script>

在这个示例中，我们使用了 ElementUI 中的 el-form、el-form-item、el-input 和 el-button 组件来构建一个简单的登录表单。其中，v-model 指令用于实现双向数据绑定，将输入框中的值绑定到 form 对象中的 username 和 password 属性上。在提交按钮的点击事件中，我们调用了 submitForm 方法来验证表单数据的有效性，如果验证通过则弹出提交成功的提示框。