vue中国城市选择器的使用教程(element-china-area-data)

更新时间：2023年11月14日 09:27:36 作者：前端大鹌鹑

这篇文章主要给大家介绍了关于vue中国城市选择器使用(element-china-area-data)的相关资料,使用element-china-area-data插件可以非常方便地实现省市县三级联动选择器,需要的朋友可以参考下

一、Element UI 中国省市区级联数据

1. 安装

npm install element-china-area-data -S

2. 使用

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

provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项）
“全部"选项绑定的value是空字符串”"
CodeToText是个大对象，属性是区域码，属性值是汉字用法例如：CodeToText[‘110000’]输出北京市
extToCode是个大对象，属性是汉字，属性值是区域码
用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

3.案例

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

<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>

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

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

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

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

3.4 省市三级联动（带“全部”选项）:

<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) {
        console.log(value)
      }
    }
  }
</script>

二、CodeToText的使用

把区域码转成汉字

getCodeToText(codeArray) {
      let area = "";
      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]];
          break;
        case 2:
          area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
          break;
        case 3:
          area +=
            CodeToText[codeArray[0]] +
            "/" +
            CodeToText[codeArray[1]] +
            "/" +
            CodeToText[codeArray[2]];
          break;
        default:
          break;
      }
      console.log(area);
    }

三、完整案例

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

<script>
  import { regionData ,CodeToText} from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData,
        selectedOptions: []
      }
    },

    methods: {
      handleChange (value) {
        this.getCodeToText(value)
      },
      getCodeToText(codeArray) {
      let area = "";
      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]];
          break;
        case 2:
          area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
          break;
        case 3:
          area +=
            CodeToText[codeArray[0]] +
            "/" +
            CodeToText[codeArray[1]] +
            "/" +
            CodeToText[codeArray[2]];
          break;
        default:
          break;
      }
      console.log(area);
    }
    }
  }
</script>

总结

到此这篇关于vue中国城市选择器使用的文章就介绍到这了,更多相关vue中国城市选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

mpvue微信小程序多列选择器用法之省份城市选择的实现

Vue实现点击导航栏当前标签后变色功能
这篇文章主要为大家详细介绍了Vue实现点击导航栏当前标签后变色功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
vue如何根据权限生成动态路由、导航栏
这篇文章主要介绍了vue如何根据权限生成动态路由、导航栏，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
100行代码实现一个vue分页组功能
今天用vue来实现一个分页组件，总体来说，vue实现比较简单，样式部分模仿了elementUI。接下来本文通过实例代码给大家介绍100行代码实现一个vue分页组功能，感兴趣的朋友跟随小编一起看看吧
2018-11-11
Vue新搭档TypeScript快速入门实践记录
TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法。这篇文章主要介绍了Vue新搭档TypeScript快速入门实践,需要的朋友可以参考下
2021-06-06
vue3中安装并使用CSS预处理器Sass的方法详解
Sass是一种CSS预处理器,它扩展了CSS的功能,提供了更高级的语法和特性,例如变量、嵌套、混合、继承和颜色功能等,这些特性可以帮助开发者更高效地管理和维护样式表,本文介绍vue3中安装并使用CSS预处理器Sass的方法,感兴趣的朋友一起看看吧
2024-01-01
Vue+webpack实现懒加载过程解析
这篇文章主要介绍了Vue+webpack实现懒加载过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-02-02
vue项目中data数据之间互相访问的实现
本文主要介绍了vue项目中data数据之间互相访问的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
Vue3中关于ref和reactive的区别分析
这篇文章主要介绍了vue3关于ref和reactive的区别分析，文中通过示例代码介绍的非常详细，具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-06-06
Vue+Echarts实现绘制多设备状态甘特图
这篇文章主要为大家详细介绍了Vue如何结合Echarts实现绘制多设备状态甘特图,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
2024-03-03
Vue监听键盘事件实用示例
我们在开发过程中经常需要监听用户的输入,比如用户的点击事件、拖拽事件、键盘事件等等,这篇文章主要给大家介绍了关于Vue监听键盘事件实用示例的相关资料,需要的朋友可以参考下
2023-11-11