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>
相关推荐
爬山算法15 分钟前
Maven(28)如何使用Maven进行依赖解析?
java·maven
2401_8574396939 分钟前
SpringBoot框架在资产管理中的应用
java·spring boot·后端
怀旧66640 分钟前
spring boot 项目配置https服务
java·spring boot·后端·学习·个人开发·1024程序员节
李老头探索42 分钟前
Java面试之Java中实现多线程有几种方法
java·开发语言·面试
芒果披萨1 小时前
Filter和Listener
java·filter
qq_4924484461 小时前
Java实现App自动化(Appium Demo)
java
阿华的代码王国1 小时前
【SpringMVC】——Cookie和Session机制
java·后端·spring·cookie·session·会话
找了一圈尾巴2 小时前
前后端交互通用排序策略
java·交互
哎呦没4 小时前
SpringBoot框架下的资产管理自动化
java·spring boot·后端
m0_571957586 小时前
Java | Leetcode Java题解之第543题二叉树的直径
java·leetcode·题解