Use of regional linkage plug-in element-china-area-data (support vue2 and vue3)

Since vue3 became the default version, projects basically use vue3. The plug-in v-distpicker ( v-distpicker ) for region selection has also been updated to support vue3. But its functions are not particularly complete. For example, if I only want provincial and municipal v-distpickers, it is not very applicable. Today I want to share element-china-area-data with more choices .

Install

npm install element-china-area-data -S

quote

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

Server-side usage (vue3+ts using require will report an error, it should be that vite or ts does not support require, so I haven't studied it yet.)

const { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } = require('element-china-area-data/dist/app.commonjs')

1. provinceAndCityDataIt is the second-level linkage data of provinces and cities (without the "all" option)

2. regionDataIt is the three-level linkage data of provinces and municipalities (without the "all" option)

3. provinceAndCityDataPlusIt is the three-level linkage data of provinces and municipalities (with the "all" option)

4. regionDataPlusIt is the three-level linkage data of provinces and municipalities (with the "all" option)

5. The value bound to the "all" option is the empty string ""

6. CodeToTextIt is a large object, the attribute is the area code, and the attribute value is the Chinese character Usage example: CodeToText['110000']output北京市

7. TextToCodeIt is a large object, the attribute is Chinese characters, and the attribute value is the area code Usage example: TextToCode['北京市'].codeoutput 110000, TextToCode['北京市']['市辖区'].codeoutput 110100, TextToCode['北京市']['市辖区']['朝阳区'].codeoutput110105

The following examples are all written in vue3+ts. Vue3 is imported on demand, and you can import whatever you use, otherwise an error will be reported.

element-china-area-data needs to be used in conjunction with Element Plus's el-cascader cascade selector.

1. Provincial and municipal secondary linkage (without "all" option)

<script setup lang="ts">
import { ref } from 'vue'
import { provinceAndCityData, CodeToText } from 'element-china-area-data'
​
const options = ref(provinceAndCityData)
const selectedOptions = ref([])
​
const handleChange = () => {
  console.log(selectedOptions.value)
  if (selectedOptions.value[0] != null && selectedOptions.value[1] != null) {
    const str = CodeToText[selectedOptions.value[0]] + '/' + CodeToText[selectedOptions.value[1]]
    console.log(str)
  }
}
</script>
​
<template>
  <div>
    <el-cascader size="large" 
    :options="options" 
    v-model="selectedOptions" 
    @change="handleChange"/>
  </div>
</template>

2. Provincial and municipal secondary linkage (with "all" option)

<script setup lang="ts">
import { ref } from 'vue'
import { provinceAndCityDataPlus, CodeToText } from 'element-china-area-data'
​
const options = ref(provinceAndCityDataPlus)
const selectedOptions = ref([])
​
const handleChange = () => {
  console.log(selectedOptions.value)
  if (selectedOptions.value[0] != null && selectedOptions.value[1] != null) {
    const str = CodeToText[selectedOptions.value[0]] + '/' + CodeToText[selectedOptions.value[1]]
    console.log(str)
  }
}
</script>
​
<template>
  <div>
    <el-cascader 
    size="large" 
    :options="options" 
    v-model="selectedOptions" 
    @change="handleChange"/>
  </div>
</template>

3. Three-level linkage between provinces and municipalities (without the "all" option)

<script setup lang="ts">
import { ref } from 'vue'
import { regionData, CodeToText } from 'element-china-area-data'
​
const options = ref(regionData)
const selectedOptions = ref([])
​
const handleChange = () => {
  console.log(selectedOptions.value)
  if (
    selectedOptions.value[0] != null &&
    selectedOptions.value[1] != null &&
    selectedOptions.value[2] != null
  ) {
    const str =
      CodeToText[selectedOptions.value[0]] +
      '/' +
      CodeToText[selectedOptions.value[1]] +
      '/' +
      CodeToText[selectedOptions.value[2]]
    console.log(str)
  }
}
</script>
​
<template>
  <div>
      <el-cascader 
      size="large" 
      :options="options" 
      v-model="selectedOptions" 
      @change="handleChange"/>
  </div>
</template>

4. Three-level linkage between provinces and municipalities (with "all" option)

<script setup lang="ts">
import { ref } from 'vue'
import { regionDataPlus, CodeToText } from 'element-china-area-data'
​
const options = ref(regionDataPlus)
const selectedOptions = ref([])
​
const handleChange = () => {
  console.log(selectedOptions.value)
  if (
    selectedOptions.value[0] != null &&
    selectedOptions.value[1] != null &&
    selectedOptions.value[2] != null
  ) {
    const str =
      CodeToText[selectedOptions.value[0]] +
      '/' +
      CodeToText[selectedOptions.value[1]] +
      '/' +
      CodeToText[selectedOptions.value[2]]
    console.log(str)
  }
}
</script>
​
<template>
  <div>
      <el-cascader 
      size="large" 
      :options="options" 
      v-model="selectedOptions" 
      @change="handleChange"/>
  </div>
</template>