基于vue+iview实现省市二级联动

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> ```