写一段二次封装element UI的表单
时间: 2023-03-30 17:03:21 浏览: 114
很高兴回答您的问题。以下是一段二次封装element UI的表单代码示例:
```
<template>
<el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="formData.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="formData.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
age: '',
gender: ''
},
formRules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字值' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'change' }
]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单验证通过,提交表单数据
console.log(this.formData)
} else {
// 表单验证失败,提示错误信息
console.log('表单验证失败')
}
})
},
resetForm() {
this.$refs.form.resetFields()
}
}
}
</script>
```
希望这段代码能够帮助您二次封装element UI的表单。如果您有任何问题,请随时联系我。
阅读全文