基于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>