vue3 使用 element-china-area-data 实现地区选择器

官方地址:https://www.npmjs.com/package/element-china-area-data?activeTab=readme

在线示例:https://plortinus.github.io/element-china-area-data/index.html

实际使用

java 复制代码
		<el-col :span="12">
          <el-form-item label="所处城市" prop="address">
            <el-cascader
              v-model="temp.address"
              :options="pcaTextArr()"/>
          </el-form-item>
        </el-col>

import { pcaTextArr } from 'element-china-area-data'

	pcaTextArr() {
      return pcaTextArr
    },

安装

java 复制代码
npm install element-china-area-data -S

import 使用

我引用的是v6版本,组件有改动

java 复制代码
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";

provinceAndCityData省市二级联动数据,汉字+code

regionData省市区三级联动数据

pcTextArr省市联动数据,纯汉字

pcaTextArr省市区联动数据,纯汉字

codeToText是个大对象,属性是区域码,属性值是汉字 用法例如:codeToText['110000']输出北京市

省市二级联动:

java 复制代码
<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="provinceAndCityData"
      v-model="selectedOptions">
    </el-cascader>
  </div>
</template>

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

省市二级联动,纯汉字:

java 复制代码
<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="pcTextArr"
      v-model="selectedOptions">
    </el-cascader>
  </div>
</template>

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

省市区三级联动

java 复制代码
<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="regionData"
      v-model="selectedOptions">
    </el-cascader>
  </div>
</template>

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

省市区三级联动,纯汉字

java 复制代码
<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="pcaTextArr"
      v-model="selectedOptions">
    </el-cascader>
  </div>
</template>

<script>
  import { pcaTextArr } from 'element-china-area-data'
  export default {
    data () {
      return {
        pcaTextArr,
        selectedOptions: []
      }
    },
  }
</script>
相关推荐
吾日三省吾码2 小时前
JVM 性能调优
java
弗拉唐3 小时前
springBoot,mp,ssm整合案例
java·spring boot·mybatis
oi773 小时前
使用itextpdf进行pdf模版填充中文文本时部分字不显示问题
java·服务器
少说多做3434 小时前
Android 不同情况下使用 runOnUiThread
android·java
知兀4 小时前
Java的方法、基本和引用数据类型
java·笔记·黑马程序员
蓝黑20204 小时前
IntelliJ IDEA常用快捷键
java·ide·intellij-idea
Ysjt | 深4 小时前
C++多线程编程入门教程(优质版)
java·开发语言·jvm·c++
shuangrenlong4 小时前
slice介绍slice查看器
java·ubuntu
牧竹子4 小时前
对原jar包解压后修改原class文件后重新打包为jar
java·jar