elementui的form表单提交
时间: 2023-04-26 10:02:19 浏览: 135
ElementUI 的 form 表单提交可以使用原生 HTML 的 form 标签,并在其中使用 ElementUI 提供的 el-form 和 el-form-item 组件来创建表单。
在 el-form 中可以使用 ref 属性来绑定表单数据,并使用 :model 属性来绑定表单元素的 v-model。
在 el-form-item 中可以使用 prop 属性来绑定表单元素的 name 属性,并使用 :rules 属性来绑定表单验证规则。
最后使用 el-form 的 submit() 方法来提交表单,并在表单中添加 @submit 事件处理程序来实现提交后的逻辑。
示例代码:
```
<el-form ref="form" :model="formData" @submit.native.prevent="submitForm">
<el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
<el-input v-model="formData.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
<el-input v-model="formData.password" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
```
```
<script>
export default {
data() {
return {
formData: {
username: '',
password: ''
}
}
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log(this.formData)
// 提交表单
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
```
需要注意的是,在使用 el-formElementUI 中的 form 表单提交可以使用 `v-on:submit` 监听表单提交事件,并在监听函数中进行数据的提交操作。另外,ElementUI 也提供了 `el-form` 组件的 `ref` 属性,可以通过该属性获取到表单实例,并调用实例的 `validate` 方法进行表单验证。
例如:
```html
<el-form ref="form" @submit.native.prevent="submitForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input 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>
```
```javascript
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 提交表单数据
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
```
这样就可以在 submitForm 中获取到表单数据并进行提交了。
阅读全文