1. 安装
iview组件库
```
npm install
iview --save
```
2. 在main.js中引入
iview
```
import Vue from 'vue'
import
iView from '
iview'
import '
iview/dist/styles/
iview.css'
Vue.use(
iView)
```
3. 创建省市二级联动组件
```
<template>
<div>
<Select v-model="province" style="width: 120px" @on-change="handleProvinceChange">
<Option v-for="p in provinces" :value="p.value" :key="p.value">{{ p.label }}</Option>
</Select>
<Select v-model="city" style="width: 120px">
<Option v-for="c in cities" :value="c.value" :key="c.value">{{ c.label }}</Option>
</Select>
</div>
</template>
<script>
export default {
data () {
return {
provinces: [
{ value: 'beijing', label: '北京' },
{ value: 'shanghai', label: '上海' },
{ value: 'tianjin', label: '天津' },
{ value: 'chongqing', label: '重庆' },
{ value: 'hebei', label: '河北省' },
{ value: 'shanxi', label: '山西省' },
{ value: 'liaoning', label: '辽宁省' },
{ value: 'jilin', label: '吉林省' },
{ value: 'heilongjiang', label: '黑龙江省' },
{ value: 'jiangsu', label: '江苏省' },
{ value: 'zhejiang', label: '浙江省' },
{ value: 'anhui', label: '安徽省' },
{ value: 'fujian', label: '福建省' },
{ value: 'jiangxi', label: '江西省' },
{ value: 'shandong', label: '山东省' },
{ value: 'henan', label: '河南省' },
{ value: 'hubei', label: '湖北省' },
{ value: 'hunan', label: '湖南省' },
{ value: 'guangdong', label: '广东省' },
{ value: 'guangxi', label: '广西壮族自治区' },
{ value: 'hainan', label: '海南省' },
{ value: 'sichuan', label: '四川省' },
{ value: 'guizhou', label: '贵州省' },
{ value: 'yunnan', label: '云南省' },
{ value: 'shaanxi', label: '陕西省' },
{ value: 'gansu', label: '甘肃省' },
{ value: 'qinghai', label: '青海省' },
{ value: 'ningxia', label: '宁夏回族自治区' },
{ value: 'xinjiang', label: '新疆维吾尔自治区' },
{ value: 'taiwan', label: '台湾省' },
{ value: 'xianggang', label: '香港特别行政区' },
{ value: 'aomen', label: '澳门特别行政区' }
],
cities: [],
province: '',
city: ''
}
},
methods: {
handleProvinceChange (value) {
switch (value) {
case 'beijing':
this.cities = [
{ value: 'beijing', label: '北京' }
]
break
case 'shanghai':
this.cities = [
{ value: 'shanghai', label: '上海' }
]
break
case 'tianjin':
this.cities = [
{ value: 'tianjin', label: '天津' }
]
break
case 'chongqing':
this.cities = [
{ value: 'chongqing', label: '重庆' }
]
break
case 'hebei':
this.cities = [
{ value: 'shijiazhuang', label: '石家庄' },
{ value: 'tangshan', label: '唐山' },
{ value: 'qinhuangdao', label: '秦皇岛' },
{ value: 'handan', label: '邯郸' },
{ value: 'xingtai', label: '邢台' },
{ value: 'baoding', label: '保定' },
{ value: 'zhangjiakou', label: '张家口' },
{ value: 'chengde', label: '承德' },
{ value: 'cangzhou', label: '沧州' },
{ value: 'langfang', label: '廊坊' },
{ value: 'hengshui', label: '衡水' }
]
break
case 'shanxi':
this.cities = [
{ value: 'taiyuan', label: '太原' },
{ value: 'datong', label: '大同' },
{ value: 'yangquan', label: '阳泉' },
{ value: 'changzhi', label: '长治' },
{ value: 'jincheng', label: '晋城' },
{ value: 'shuozhou', label: '朔州' },
{ value: 'jinzhong', label: '晋中' },
{ value: 'yuncheng', label: '运城' },
{ value: 'xinzhou', label: '忻州' },
{ value: 'lvliang', label: '吕梁' }
]
break
// 其他省略
}
this.city = this.cities[0].value
}
}
}
</script>
```
4. 在父组件中使用省市二级联动组件
```
<template>
<div>
<ProvinceCity></ProvinceCity>
</div>
</template>
<script>
import ProvinceCity from './components/ProvinceCity'
export default {
components: {
ProvinceCity
}
}
</script>
```
3130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
