5fcc1352
 Andy
add 车主模板 左侧菜单
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
<template>
<div>
<div class="search-wrap">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
<el-form-item label="手机号" class="margin-bottom30" prop="tell">
<el-input v-model="ruleForm.tell" style="width: 300px"></el-input>
</el-form-item>
<el-form-item label="账户" class="margin-bottom30" prop="username">
<el-input v-model="ruleForm.username" style="width: 300px"></el-input>
</el-form-item>
<el-form-item label="邮箱" class="margin-bottom30" prop="email">
<el-input v-model="ruleForm.email" style="width: 300px"></el-input>
</el-form-item>
<el-form-item label="密码" class="margin-bottom30" prop="pwd">
<el-input type="password" v-model="ruleForm.pwd" autocomplete="off" style="width: 300px"></el-input>
</el-form-item>
<el-form-item label="车牌号" class="margin-bottom30" prop="carnum">
<el-input v-model="ruleForm.carnum" style="width: 300px"></el-input>
</el-form-item>
<el-form-item label="用户级别" class="margin-bottom30" prop="level">
<el-input v-model="ruleForm.level" style="width: 300px" disabled></el-input>
</el-form-item>
<el-form-item label="注册时间" class="margin-bottom30" prop="starttime">
<el-input v-model="ruleForm.starttime" style="width: 300px" disabled></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
tell: '15143323434',
username: '万八',
email: '15143323434@163.com',
pwd: '232342',
carnum: '京A32345',
starttime: '2019-08-17',
level: '普通'
},
rules: {
tell: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
username: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
],
pwd: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
carnum: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
}
}
},
methods: {
onSubmit() {
console.log('submit!');
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style lang="scss">
.search-wrap{
background-color: #FFF;
padding: 15px;
}
.card-second-top{
margin-top: 15px;
}
.el-card__header{
padding: 10px 20px;
}
.el-radio{
margin-right: 80px;
}
.el-radio.is-bordered+.el-radio.is-bordered{
margin-left: 0px;
margin-top: 15px;
}
.margin-bottom30{
margin-bottom: 30px;
}
</style>
|
