ElementUI实现表单数据提交
ElementUI 是一个基于 Vue.js 的高质量 UI 组件库，由饿了么前端团队开发和维护。它为开发者提供了一系列丰富、灵活且易于使用的组件，帮助开发者快速构建出美观且功能强大的 Web 应用程序。ElementUI 提供了包括布局、导航、表单、数据展示等一系列常用的 UI 组件，同时也支持按需加载和自定义主题等功能，使得开发者可以更加高效地进行开发。
以下是一个使用 ElementUI 的简单示例代码，展示了一个包含输入框和按钮的表单：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<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 方法来验证表单数据的有效性，如果验证通过则弹出提交成功的提示框。
