Vue+Element UI 实现省市区数据联动

1.安装

npm install element-china-area-data -S

2.使用
省市区三级联动带全部

//Test.vue
<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
    >
    </el-cascader>
  </div>
</template>

<script>
import { regionDataPlus } from "element-china-area-data";
export default {
  data() {
    return {
      options: regionDataPlus,
      selectedOptions: [],
    };
  },

  methods: {
    handleChange(value) {
//value代表每个地方的区域码
      console.log(value);
    },
  },
};
</script>

转化为城市名：

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
 
/*
provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项）
*/
 
data() {
    return {
      addressData: provinceAndCityData,
      selectedAddress: [],
    };
  }
 
//拿到选择的省与城市
methods: {
    getAddress(value) { //value是长度为2的装有被选择省、市代码的数组;CodeToText是个对象，键名为代码，键值为省和城市
      this.selectedAddress = [];
      for (let i = 0; i < value.length; i++) {
        let code = value[i];
        this.selectedAddress.push(CodeToText[code]);
      }
      console.log(this.selectedAddress); //["河北省","唐山市"]
    }
}