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

你邻座的怪同学2023-08-10 11:48

官方地址：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>