element-china-area-data 中国省市区级联选择器

1.安装

npm install element-china-area-data -S

2. 说明
文档：element-china-area-data - npm

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

3. 数据库设计

如果需要分别按照省、市统计，建议构建两个字段

 4.  elementUI显示

     <el-form-item label="地址" prop="goodCode"><el-cascadersize="large":options="options"v-model="selectedOptions"@change="handleChange"></el-cascader></el-form-item>

 导入：

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

数据

  data() {return {options: provinceAndCityData,selectedOptions: [],};},

方法：

    //省市联动-选择框选择handleChange (value) {var provinceCode = CodeToText[value[0]];var cityCode = CodeToText[value[1]];this.selectedOptions = [value[0] , value[1]]this.form.goodProvince = provinceCodethis.form.goodCity  = cityCodeconsole.log(provinceCode)console.log(cityCode)},

    //省市联动-选择框显示getAddressInfo() {this.addressSelections = [];let provinceCode= TextToCode[this.form.goodProvince].code;let cityCode= TextToCode[this.form.goodProvince][this.form.goodCity].code;this.selectedOptions = [provinceCode , cityCode]},

5. 效果

6. 如果省市二级联动（带“全部”选项）:，则options改为provinceAndCityDataPlus

<script>import { provinceAndCityDataPlus } from 'element-china-area-data'export default { data () {return {options: provinceAndCityDataPlus,selectedOptions: []}},methods: {handleChange (value) {console.log(value)}}}
</script>