vue3 使用 element-china-area-data 实现地区选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了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

实际使用

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

安装

npm install element-china-area-data -S

import 使用

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

import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";

provinceAndCityData省市二级联动数据,汉字+code
regionData省市区三级联动数据
pcTextArr省市联动数据，纯汉字
pcaTextArr省市区联动数据，纯汉字
codeToText是个大对象，属性是区域码，属性值是汉字用法例如：codeToText[‘110000’]输出北京市

省市二级联动:

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

省市二级联动,纯汉字:

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

省市区三级联动

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

省市区三级联动，纯汉字文章来源地址https://www.toymoban.com/news/detail-636847.html

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

联动的同时显示编码和文字地名

		  <el-form-item label="项目所在地" prop="cityNamePath">
            <el-cascader
              v-model="selectedOptions"
              size="large"
              :options="regionData"
              @change="handleChange"/>
          </el-form-item>

import { codeToText, regionData } from 'element-china-area-data'

cityNamePath: undefined,
cityCodes: undefined,


	handleChange() {
      if (this.selectedOptions[0] != null && this.selectedOptions[1] != null && this.selectedOptions[2] != null) {
        this.temp.cityNamePath = this.codeToText[this.selectedOptions[0]] + '/' + this.codeToText[this.selectedOptions[1]] + '/' + this.codeToText[this.selectedOptions[2]]
        this.temp.cityCodes = this.selectedOptions[2]
      }
    },