/
address.vue
123 lines (112 loc) · 2.93 KB
/
address.vue
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
115
116
117
118
119
120
121
122
123
<!-- 地址选择组件 -->
<template>
<el-form :model="form" class="demo-ruleForm" :rules="rules" ref="form" label-position="top">
<el-row :gutter="20" class="address">
<el-col :span="5">
<el-form-item prop="province">
<el-select v-model="form.province" placeholder="请输入省" @change="proChange" >
<el-option
v-for="item in provinces"
:key="item.value"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item prop="city">
<el-select v-model="form.city" placeholder="请输入市" @change="cityChange" >
<el-option
v-for="item in citys"
:key="item.value"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="detail">
<el-input
placeholder="请填写详细地址"
:number="true"
v-model="form.detail">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
import addressData from '../assets/js/addressData.js'
import store from 'src/store.js'
function formatData(data){
var result = [];
for(var key in data){
result.push({
value: key
})
}
return result
}
export default {
name:'address',
props:['province','city','detail','isAddressTrue'],
data: function () {
return {
rules:{
province:[{required:true,message:'请选择省份',trigger:'change'}],
city:[{required:true,message:'请选择城市',trigger:'change'}],
detail:[{required:true,message:'请填写详细地址',trigger:'change'}]
},
form:{
province: this.province,
city: this.city,
detail: this.detail
},
provinces: formatData(addressData)
}
},
watch: {
form: {
handler:function(){
store.commit('setRuleForm',this.form);
},
deep:true
},
ifCheckFrom: function (val,oldVal) {
if(val){
this.$refs.form.validate((valid) => {
}) ;
}
}
},
computed: {
citys: function (){
return formatData(addressData[this.form.province])
},
ifCheckFrom: function () {
return this.isAddressTrue
}
},
methods: {
proChange: function (val,oldVal) {
if(oldVal){
this.form.city='';
this.form.detail='';
}
var data = formatData(addressData[this.form.province]);
for(var i =0; i<data.length; i++){
this.$set(this.citys,i,data[i]);
}
},
cityChange: function (val, oldVal) {
if (oldVal) {
this.form.detail = '';
}
},
}
}
</script>
<style>
.address .el-form-item{margin-bottom: 0!important;margin-right: 0!important;}
</style>