51.《vue省市级 三级联动 demo》

VUE 省市区三级联动选择 PC端项目插件（非常推荐)

1. vue中安装依赖

npm install element-china-area-data -S

2. 在要使用的组件中 导入

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

解释：

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

具体解释链接

• [详解] https://plortinus.github.io/element-china-area-data/index.html

代码示例

<template>
  <div id="apps">
    <el-cascader size="large" :options="options" v-model="selectedOptions" @change="addressChange"></el-cascader>
  </div>
</template>

<script>
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
} from "element-china-area-data";

export default {
  data() {
    return {
      options: regionData,
      selectedOptions: [ "130000", "130100", "130104" ]
    };
  },
  methods: {
    addressChange(arr) {
      console.log(arr);
      console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]);
    }
  }
};
</script>

<style>
</style>

demo github地址

github-Demo地址