写一个elementui的表单
时间: 2023-10-31 17:51:06 浏览: 38
<template>
<el-form ref="form" :model="formData" label-width="120px">
<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 label="地址" prop="address">
<el-input v-model="formData.address"></el-input>
</el-form-item>
<el-form-item label="爱好" prop="hobby">
<el-checkbox-group v-model="formData.hobby">
<el-checkbox label="reading">阅读</el-checkbox>
<el-checkbox label="music">音乐</el-checkbox>
<el-checkbox label="sports">运动</el-checkbox>
</el-checkbox-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: '',
address: '',
hobby: [],
},
};
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log(this.formData);
} else {
console.log('表单校验失败!');
return false;
}
});
},
resetForm() {
this.$refs.form.resetFields();
},
},
};
</script>