vue-element省市联动组件使用方法，以及如何单独选择某一级，如只选择省，或者只选择市

最新推荐文章于 2025-01-20 17:27:44 发布

原创最新推荐文章于 2025-01-20 17:27:44 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #前端 #elementui

vue-element 专栏收录该内容

16 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中安装和使用`element-china-area-data`库来实现省市区三级联动的选择功能。通过引入`regionData`等数据，结合`CodeToText`和`TextToCode`对象进行数据转换，实现了可以根据区域码获取汉字或根据汉字获取区域码的功能。同时，博主分享了一个技巧，使得用户可以选择任意级别（省、市、区）而不需要每次都选到最后一级。

先上代码

<template>
<el-cascader
   ref="cascader"
   size="large"
   change-on-select
   :options="options"
   v-model="searea"
   @change="handleChange"
 >
 </el-cascader>
 </template>
 <script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
export default {
  components: {
    tree,
    Searchname
  },
  data() {
    return {
      options: regionData,
      searea: "",
    };
  },
  methods: {
    //城市选择
    handleChange(e) {
    console.log(e)
    //直接输出数组
   	//可以转换为对应的城市编码TextToCode，或将城市转换为名称CodeToText
   	
    },
  },
  mounted() {
    //城市选择配置
    setInterval(function() {
      document.querySelectorAll(".el-cascader-node__label").forEach(el => {
        el.onclick = function() {
          if (this.previousElementSibling) this.previousElementSibling.click();
        };
      });
    }, 1000);
  }
};
</script>

1,安装省市区插件

npm install element-china-area-data -S
//引用
import { regionData, CodeToText, TextToCode } from "element-china-area-data";

2,省市区插件介绍
provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项）
“全部"选项绑定的value是空字符串”"
CodeToText是个大对象，属性是区域码，属性值是汉字用法例如：CodeToText[‘110000’]输出北京市
TextToCode是个大对象，属性是汉字，属性值是区域码用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105
需要什么方法或值，就在引用时加入进去
3，正常情况需要选到最后一级才行，增加上文（城市选择配置）的代码，可实现单独选择某一级，例如只选择省，或者只选择市