< 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 = " phone" >
< el-input v-model = " formData.phone" > </ 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 = " school" >
< el-input v-model = " formData.school" > </ 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 = " location" >
< el-radio-group v-model = " locationType" >
< el-radio label = " province" > 选择省市区</ el-radio>
< el-radio label = " custom" > 手填地点</ el-radio>
</ el-radio-group>
< el-collapse v-model = " collapseVisible" v-if = " locationType === 'province'" >
< el-cascader
v-model = " formData.location"
:options = " options"
placeholder = " 请选择省市区"
clearable
:props = " { value: 'code', label: 'name', children: 'children' }"
> </ el-cascader>
</ el-collapse>
< el-input v-model = " formData.location" v-else placeholder = " 请输入手填地点" > </ el-input>
</ el-form-item>
< el-form-item>
< el-button type = " primary" @click = " submitForm" > 提交</ el-button>
</ el-form-item>
</ el-form>
</ template>
< script>
import { ref } from 'vue' ;
import axios from 'axios' ;
import { ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio, ElButton, ElCollapse, ElCascader } from 'element-plus' ;
export default {
components : {
ElForm,
ElFormItem,
ElInput,
ElRadioGroup,
ElRadio,
ElButton,
ElCollapse,
ElCascader,
} ,
data ( ) {
return {
formData : {
name : '' ,
phone : '' ,
age : '' ,
school : '' ,
gender : '' ,
location : '' ,
} ,
formRules : {
name : [ { required : true , message : '请输入姓名' , trigger : 'blur' } ] ,
phone : [
{ required : true , message : '请输入手机号' , trigger : 'blur' } ,
{ pattern : / ^[1][3,4,5,7,8][0-9]{9}$ / , message : '手机号格式不正确' , trigger : 'blur' } ,
] ,
age : [ { required : true , message : '请输入年龄' , trigger : 'blur' } ] ,
school : [ { required : true , message : '请输入学校' , trigger : 'blur' } ] ,
gender : [ { required : true , message : '请选择性别' , trigger : 'change' } ] ,
location : [ { required : true , message : '请选择或输入地点' , trigger : 'blur' } ] ,
} ,
locationType : 'province' ,
collapseVisible : false ,
options : [
{ code : '110000' , name : '北京市' , children : [ ... ] } ,
{ code : '120000' , name : '天津市' , children : [ ... ] } ,
] ,
} ;
} ,
methods : {
submitForm ( ) {
this . $refs. form. validate ( ( valid ) => {
if ( valid) {
axios. post ( '/api/submit' , this . formData)
. then ( response => {
console. log ( '提交成功' , response) ;
} )
. catch ( error => {
console. error ( '提交失败' , error) ;
} ) ;
} else {
return false ;
}
} ) ;
} ,
} ,
} ;
</ script>
< style>
</ style>