Element UI element-china-area-data 中国省市区三级、二级联动option数据设置默认值

最新推荐文章于 2025-11-14 15:22:56 发布

原创最新推荐文章于 2025-11-14 15:22:56 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个基于Element UI的级联选择器插件，实现了中国省市区的三级联动功能，可应用于地址选择场景。插件通过JSON数据格式加载省市县区信息，并支持将地区名称转换为代码或反之。

<el-cascader
        class="long"
        size="large"
        :options="regionData"
        v-model="selectedOptions2"
        @change="handleChange">
      </el-cascader>


import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
} from "../dist/app.js";

data() {
    return { 
      CodeToText,
      TextToCode,  
      regionData,    
      //selectedOptions2: [ "330000", "331000", "331002" ],
      selectedOptions2: []
    };
  },
mounted() {    
    var arr=['浙江省','台州市','椒江区'];
    var arg1=this.TextToCode[arr[0]].code;
    var arg2=this.TextToCode[arr[0]][arr[1]].code;
    var arg3=this.TextToCode[arr[0]][arr[1]][arr[2]].code;
    this.selectedOptions2.push(arg1,arg2,arg3);
    console.log("*********"+this.selectedOptions2);
  },
methods: {
    handleChange(value) {
      console.log(value);
    },
}

Element UI Cascader级联选择器中国省市区三级、二级联动插件地址：https://github.com/Plortinus/element-china-area-data