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

最新推荐文章于 2025-04-16 18:31:55 发布

zxna

最新推荐文章于 2025-04-16 18:31:55 发布

阅读量1.4k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/qq_32555123/article/details/124752458

版权

本文介绍了如何使用element-china-area-data插件实现Vue项目中的省市区三级联动选择，并展示了如何将选择的区域代码转换为城市名。重点在于provinceAndCityData和regionDataPlus数据的使用以及`CodeToText`对象的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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); //["河北省","唐山市"]
    }
}