1. 首先，在项目中引入
iview和
vue-resource：
```
import
Vue from '
vue'
import
iView from '
iview'
import '
iview/dist/styles/
iview.css'
import
VueResource from '
vue-resource'
Vue.use(
iView)
Vue.use(
VueResource)
```
2. 在
vue文件中使用
iview的Select组件实现省市选择：
```
<template>
<div>
<Select v-model="province" @on-change="getCityList">
<Option v-for="(item, index) in provinceList" :value="item.id" :key="index">{{ item.name }}</Option>
</Select>
<Select v-model="city">
<Option v-for="(item, index) in cityList" :value="item.id" :key="index">{{ item.name }}</Option>
</Select>
</div>
</template>
<script>
export default {
data () {
return {
province: '',
city: '',
provinceList: [],
cityList: []
}
},
mounted () {
this.getProvinceList()
},
methods: {
// 获取省份列表
getProvinceList () {
this.$http.get('/api/province').then(res => {
this.provinceList = res.data
})
},
// 获取城市列表
getCityList () {
this.$http.get('/api/city', {
params: {
province: this.province
}
}).then(res => {
this.cityList = res.data
})
}
}
}
</script>
```
3. 在后台实现省市数据接口：
省份接口：
```
app.get('/api/province', function(req, res) {
res.json([
{id: 1, name: '北京'},
{id: 2, name: '上海'},
{id: 3, name: '广东省'},
{id: 4, name: '湖南省'}
])
})
```
城市接口：
```
app.get('/api/city', function(req, res) {
var provinceId = req.query.province
var cityList = []
switch(provinceId) {
case '1':
cityList = [
{id: 101, name: '北京市'},
{id: 102, name: '海淀区'},
{id: 103, name: '朝阳区'},
{id: 104, name: '东城区'},
{id: 105, name: '西城区'}
]
break
case '2':
cityList = [
{id: 201, name: '上海市'},
{id: 202, name: '浦东新区'},
{id: 203, name: '徐汇区'},
{id: 204, name: '黄浦区'},
{id: 205, name: '静安区'}
]
break
case '3':
cityList = [
{id: 301, name: '广州市'},
{id: 302, name: '深圳市'},
{id: 303, name: '珠海市'},
{id: 304, name: '佛山市'},
{id: 305, name: '东莞市'}
]
break
case '4':
cityList = [
{id: 401, name: '长沙市'},
{id: 402, name: '株洲市'},
{id: 403, name: '湘潭市'},
{id: 404, name: '衡阳市'},
{id: 405, name: '邵阳市'}
]
break
default:
break
}
res.json(cityList)
})
```
151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
