文章目录
目录结构
贷款申请路由跳转，添加路由
贷款申请页面，表单实现信息填写,利用element-ui的卡片实现每块表单，并在最后一个卡片下添加立即创建和重置按钮,并设置相应的校验
在src下的views下新建IndexView.vue
<template>
<div>
<el-form :model="form" ref="form" :rules="rules" label-width="80px">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>个人基本信息</span>
</div>
<el-row>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="姓名" prop="name">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col
xl="8" :lg="4" :md="12" :sm="24" :xs="24">
<el-form-item label="出生日期" prop="birthday">
<el-date-picker
v-model="form.birthday"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col xl="8" :lg="4" :md="12" :sm="24" :xs="24">
<el-form-item label="性别" prop="sex">
<el-select v-model="form.sex">
<el-option key="man" label="男" value="man"></el-option>
<el-option key="woman" label="女" value="woman"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<el-form-item label="身份证" prop="identity_card">
<el-input type="input" v-model="form.indentity_card"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第二行-->
<el-row>
<el-col xl="8" :lg="4" :md="12" :sm="24" :xs="24">
<el-form-item label="婚姻状态" prop="marriage">
<el-select v-model="form.marriage">
<el-option key="married" label="已婚" value="married"></el-option>
<el-option key="unmarried" label="未婚" value="unmarried"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col xl="8" :lg="4" :md="12" :sm="24" :xs="24">
<el-form-item label="教育程度" prop="education">
<el-select v-model="form.education">
<el-option key="middle" label="初中" value="middle"></el-option>
<el-option key="higer" label="高中" value="higer"></el-option>
<el-option key="collage" label="大学" value="collage"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<el-form-item label="居住地址" prop="address">
<el-input type="input" v-model="form.address"></el-input>
</el-form-item>
</el-col>
<el-col xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<el-form-item label="手机号" prop="phone">
<el-input type="input" v-model="form.phone"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>职业信息</span>
</div>
<el-row>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="公司名称" prop="company">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.company"></el-input>
</el-form-item>
</el-col>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="公司类型" prop="company_type">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.company_type"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="公司邮箱" prop="company_email">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.company_email"></el-input>
</el-form-item>
</el-col>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="公司电话" prop="company_phone">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.company_phone"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card class="box-card">
<div slot="header" >
<span>收支情况</span>
</div>
<el-row>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="收入" prop="income">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.income"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card class="box-card">
<div slot="header" >
<span>家庭联系人</span>
</div>
<el-row>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="关系1" prop="relative1">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.relative1"></el-input>
</el-form-item>
</el-col>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="姓名" prop="family_name">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.family_name"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="手机" prop="family_phone">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.family_phone"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card class="box-card">
<div slot="header" >
<span>工作证明人</span>
</div>
<el-row>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="关系2" prop="relative2">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.relative2"></el-input>
</el-form-item>
</el-col>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="姓名" prop="work_name">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.work_name"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="手机" prop="work_phone">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.work_phone"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="部门" prop="department">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.department"></el-input>
</el-form-item>
</el-col>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="职位" prop="work_position">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.work_position"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col
:xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<!-- prop的值是下面form后面的属性名也就是name-->
<el-form-item label="备注" prop="beizhu">
<!-- 等所有表单写完统一设置属性接收-->
<el-input type="input" v-model="form.beizhu"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-button @click="createUser" type="primary">立即创建</el-button>
<el-button @click="reset">重置</el-button>
</el-form>
</div>
</template>
<script>
export default {
data(){
return{
form:{
name:"",
birthday:"",
sex:"",
identity_card:"",
marriage:"",
education:"",
address:"",
phone:"",
company:"",
company_type:"",
company_email:"",
company_phone:"",
income:"",
relative1:"",
family_name:"",
family_phone:"",
relative2:"",
work_name:"",
work_phone:"",
department:"",
work_position:"",
beizhu:""
},
rules:{
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
},
}
},
methods:{
createUser(){
this.$refs.form.validate((valid) => {
if(!valid){
this.$message("表单验证不成功");
return false;
}else {
this.$message('表单验证成功');
}
})
},
reset(){
this.$refs.form.resetFields();
}
}
}
</script>
<style scoped>
.box-card{
margin-bottom: 10px;
>div{
>div{
text-align: left;
}
}
}
</style>
