Vue + ElementUI 实现全国各个省份相对应城市的联动选择

    引入Element

因为整个项目是依赖ElementUI框架做的，所以采用了全部引入

1.在项目根目录执行命令：npm i element-ui -S进行安装
2.在main.js中引入element：
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element)

    安装城市数据

npm install element-china-area-data -S

     四种实现全国各个省份相对应城市的联动选择

<template>
  <div id="app">
    <!-- options 可选项数据源，键名可通过 Props 属性配置 array -->
    <!-- change 当选中节点变化时触发 -->
    <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange" />
  </div>
</template>

<script type="text/javascript">
// import { provinceAndCityData, CodeToText } from 'element-china-area-data' // 1.省市不带‘全部’的二级联动
// import { provinceAndCityDataPlus, CodeToText } from 'element-china-area-data'// 2.省市带‘全部’的二级联动
// import { regionData, CodeToText } from 'element-china-area-data' // 3.省市区不带‘全部’三级联动选择
import { regionDataPlus, CodeToText } from 'element-china-area-data' // 4.省市区带‘全部’三级联动选择

export default {
  data () {
    return {
      // options: provinceAndCityData, // 1.省市不带‘全部’的二级联动
      // options: provinceAndCityDataPlus, // 2.省市带‘全部’的二级联动
      // options: regionData, // 3.省市区不带‘全部’三级联动选择
      options: regionDataPlus, // 4.省市区带‘全部’三级联动选择
      selectedOptions: []
    }
  },
  methods: {
    handleChange () {
      var loc = ''
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]]
      }
      console.log(loc)// 输出区域码所对应的属性值即中文地址
    }
  }
}
</script>

<style lang="less" scoped>
</style>

 

1.省市不带‘全部’的二级联动

 

2.省市带‘全部’的二级联动

 

 

3.省市区不带‘全部’三级联动选择效果

 

 

4.省市区带‘全部’三级联动选择效果图