ElementUI的中国省市区级联数据插件element-china-area-data

ElementUI的中国省市区级联数据插件element-china-area-data可以用于Vue.js项目中创建省市区选择器。以下是如何使用这个插件的简单示例：

首先，安装插件：

npm install element-china-area-data --save

然后，在Vue组件中引入并使用：

<template>
  <div>
    <el-cascader
      v-model="selectedOptions"
      :options="options"
      @change="handleChange"
      placeholder="请选择地址"
    ></el-cascader>
  </div>
</template>
 
<script>
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
 
export default {
  data() {
    return {
      selectedOptions: [],
      options: regionData, // 使用省市区级联数据
      // 如果需要带“全部”选项，可以使用 provinceAndCityDataPlus 或 regionDataPlus
      // options: regionDataPlus 
    }
  },
  methods: {
    handleChange(value) {
      // 获取用户选择的省市区信息
      let province = CodeToText[value[0]];
      let city = CodeToText[value[1]];
      let region = CodeToText[value[2]];
      console.log(province, city, region);
    }
  }
}
</script>

在这个例子中，我们使用了el-cascader组件来创建级联选择器，并且通过options属性绑定了element-china-area-data插件提供的省市区级联数据。用户每次更改选择后，handleChange方法会被调用，并输出用户选择的省市区信息的文本表示。

注意：element-china-area-data插件提供的数据是以编码形式组织的，若需要显示中文，可以使用CodeToText对象进行转换。如果需要在选择框中显示“全部”选项，可以使用provinceAndCityDataPlus或regionDataPlus作为options的值。