Element UI 中国省市区级联数据

最新推荐文章于 2025-06-30 09:32:22 发布

O3ohn

最新推荐文章于 2025-06-30 09:32:22 发布

阅读量414

点赞数

CC 4.0 BY-SA版权

分类专栏： elementUI小课堂文章标签： elementui

本文链接：https://blog.csdn.net/ka_xingl/article/details/115720093

官网链接

这里写目录标题

安装
官网例子使用
根据后端返回地区code显示城市名称

安装

 npm install element-china-area-data -S

官网例子使用

{
   
    provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市二级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项）
“全部"选项绑定的value是空字符串”"
CodeToText是个大对象，属性是区域码，属性值是汉字用法例如：

CodeToText['110000']   输出 北京市

TextToCode是个大对象，属性是汉字，属性值是区域码用法例如：

TextToCode['北京市'].code	输出 110000
TextToCode['北京市']['市辖区'].code    输出 110100
TextToCode['北京市']['市辖区']['朝阳区'].code    输出 110105

省市二级联动（不带“全部”选项）:

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import {
   
    provinceAndCityData } from 'element-china-area-data'
  export default {
   
   
    data () {
   
   
      return {
   
   
        options: provinceAndCityData,
        selectedOptions: []
      }
    },
 
    methods: {
   
   
      handleChange (value) {
   
   
        console.log(value)
      }
    }
  }
</script>