vue 使用 element-china-area-data实现城市选择

参考文档

效果图如下：

1、安装

npm install element-china-area-data -S

2、使用

import { regionData,CodeToText } from "element-china-area-data";

provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项）
“全部"选项绑定的value是空字符串”"
CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市
extToCode是个大对象，属性是汉字，属性值是区域码
用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

省市区三级联动（不带“全部”选项）

<template>
  <div id="app">
   <el-cascader
      size="large"
       :options="options"
       placeholder="请选择地区"
       expand-trigger="hover"
       ref="cascaderAddr"
       v-model="selectedOptions"
       @change="handleChange">
     </el-cascader>
  </div>
</template>
 
<script>
  import { regionData,CodeToText} from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData,
        selectedOptions: []
      }
    },
 
    methods: {
     handleChange(value) {
     		 this.selectedOptions = value
			console.log(this.selectedOptions)
			var name = ''
			this.selectedOptions.map(item => name += CodeToText[item] + '') //将省市区三个拼接一起
			this.addtions.names = name
			console.log(this.addtions.names)
     		 //运用了CodeToText把编码转成了中文
			this.addForm.province = CodeToText[this.selectedOptions[0]]
			this.addForm.county = CodeToText[this.selectedOptions[1]]
			this.addForm.area = CodeToText[this.selectedOptions[2]]	
	
			console.log(this.addForm)
  	  },
    }
  }
</script>

注意：直接获取到的是区域码，需通过CodeToText进行处理成汉字码