# 城市级联选择
# 快速导航
# 前言
城市级联选择器,一级城市的筛选,与二级城市的绑定关联,二级城市与三级城市绑定关联
# 效果图
# 具体代码实现
cityjijianselect.vue
cityjijianSelectTabcol.js
<template>
<div>
<div class="postmen-wrap">
<div class="postmen-select">
<el-select v-model="pidVal" @change="handlePidSelct" clearable placeholder="请选择省份" size="small" class="el-select">
<el-option
v-for="item in pidOptions"
:key="item.id"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="cidVal" @change="handleCidSelect" clearable placeholder="请选择城市" size="small" class="el-select">
<el-option
v-for="item in cidOptions"
:key="item.id"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="didVal" clearable placeholder="请选择区域" size="small" class="el-select">
<el-option
v-for="item in didOptions"
:key="item.id"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input class="el-input" size="small" clearable placeholder="请输入地名" v-model="inputVal">
<el-button slot="append" size="small" icon="el-icon-search" @click="handleBtnFind" :disabled="isBtnDisabled">查询</el-button>
</el-input>
<el-button type="primary" size="small" icon="el-icon-setting" @click="handleBtnReset">重置</el-button>
</div>
<!-- 输出结果表格展示 -->
<div class="postmen-table-content" v-if="tableData.length != 0">
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column v-for="item in tableColist" :key="item.label"
:prop="item.prop"
:label="item.label"
:width="item.width"
:align="item.align"
:medium="item.medium"
></el-table-column>
</el-table>
<el-pagination
class="el-pagination"
v-if="tableData.length != 0"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[5, 10, 20, 30, 40, 50]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalcount">
</el-pagination>
</div>
<el-empty v-if="isResultNull == true?true:false" description="暂无数据,今日接口数据查询已上限,请明日来查询">
<el-button type="danger" size="small" @click="handleJinQueFind('https://cesuan.itclan.pro/yunyincs/?spread=tui&dhid=720')">更精确姻缘测试查询</el-button>
</el-empty>
</div>
</div>
</template>
<script>
import { tableColist } from "./cityjilianSelectTabCol.js";
export default {
name: 'cityjilianSelect',
data() {
return {
pidVal:'',
cidVal: '',
didVal: '',
inputVal: '',
isBtnDisabled: false,
isResultNull: false,
page: 1,
pagesize: 5,
totalcount: null,
totalpage: null,
// 表头数据
tableColist,
pidOptions: [],
cidOptions: [],
didOptions: [],
result: [],
citySelectData: [],
tableData: []
}
},
mounted() {
this.getPidCidDid();
},
methods: {
async getPidCidDid() {
let development = process.env.NODE_ENV == 'development' ? true : false;
console.log(development, 'development'); //true的时候为开发环境
if (development) {
this.url = '/pidciddidapi';
} else {
this.url = 'https://v.juhe.cn';
}
const params = {
key: "db2983aef2b29eca4837783fc1c58211",
}
let res = await this.$axios.get(`${this.url}/postcode/pcd`,{params});
console.log(res, 'res');
if(res.status == 200 && res.data.error_code == 0) {
const data = res.data.result;
this.result = data;
// 取第一级省份的数据,id和名称
data.forEach((levels) => {
this.pidOptions.push({
label: levels.province,
value: levels.id
});
})
}else {
this.isResultNull = true;
this.$message.error("今日接口调用已上限,请明天再来吧");
}
},
async handleBtnFind() {
this.isBtnDisabled = true;
let isSelectOpt = this.pidVal && this.cidVal;
if(isSelectOpt) {
let development = process.env.NODE_ENV == 'development' ? true : false;
console.log(development, 'development'); //true的时候为开发环境
if (development) {
this.url = '/postmenfindapi';
} else {
this.url = 'https://v.juhe.cn';
}
const params = {
key: "db2983aef2b29eca4837783fc1c58211",
pid: this.pidVal, // 省份ID
cid: this.cidVal, // 城市ID
did: this.didVal, // 区县ID
q: this.inputVal, // 查询关键字
page: this.page, // 页码
pagesize: this.pagesize, // 每页显示条数
}
let res = await this.$axios.get(`${this.url}/postcode/search`,{params});
console.log(res, 'res');
if(res.status == 200 && res.data.error_code == 0 ) {
// this.$message.success("邮编数据查询成功");
this.isBtnDisabled = false;
const data = res.data.result;
const {currentpage, list, totalcount,totalpage} = data;
this.page = currentpage;
this.tableData = list;
this.totalcount = totalcount;
this.totalpage = totalpage;
}else {
this.isResultNull = true;
this.$message.error("今日接口数据查询已上限,请明日来查询");
}
}else {
this.$message.error("省份和城市不能为空");
}
},
handleBtnReset() {
this.isBtnDisabled = false;
this.inputVal = '';
this.tableData = [];
},
handlePidSelct(val) {
console.log(val);
this.pidVal = val;
// 先清空
this.cidVal = ''
this.didVal = '';
// 需要进行帅选
let cityLevelData = this.result.filter((item) => {
return item.id == val;
});
console.log("第一层从31个省中帅选对应匹配的数据",cityLevelData);
let citys = cityLevelData[0].city;
console.log(citys);
// 取城市列表数据
this.cidOptions = citys.map((item) => {
return {
label: item.city,
value: item.id
}
})
console.log("城市列表数据-第二级",this.cidOptions);
this.citySelectData = citys;
},
handleCidSelect(val) {
console.log(val);
this.cidVal = val;
// 选中第二级时,先清空第三级数据
this.didVal = '';
let cidSecondData = this.citySelectData.filter((item) => {
return item.id == val;
});
console.log(cidSecondData);
this.didOptions = cidSecondData[0].district.map((item) => {
return {
label: item.district,
value: item.id
}
})
console.log("区域数据-第三级",this.didOptions);
},
handleSizeChange(val) {
console.log(val);
this.pagesize = val;
this.handleBtnFind();
},
handleCurrentChange(val) {
this.page = val;
this.handleBtnFind();
},
handleJinQueFind(url) {
window.open(url,'_blank');
}
}
}
</script>
<style lang="scss" scoped>
.postmen-wrap {
margin-top: 20px;
}
.postmen-select {
display: flex;
justify-content: start;
}
.el-select {
width: 120px;
margin-right: 5px;
}
.el-input {
width: 300px;
margin-right: 5px;
}
.postmen-table-content{
margin: 5px auto;
}
.el-pagination {
margin: 5px auto;
text-align:center;
}
</style>
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
