地区联动插件element-china-area-data的使用(支持vue2和vue3)

不甜呐

21189人浏览 · 2022-08-15 09:03:33

不甜呐 · 2022-08-15 09:03:33 发布

自vue3成默认版本后，项目基本上都是用vue3了。地区选择的插件v-distpicker(v-distpicker)也更新后也支持vue3的了。但是它的功能不是特別全，比如我只想要省市级v-distpicker就不是很适用。今天要分享是选择较多的element-china-area-data。

安装

npm install element-china-area-data -S

引用

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

服务端用法(vue3+ts使用require会报错，应该是vite或者ts不大支持require，暂未深究。)

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

provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项）
"全部"选项绑定的value是空字符串""
CodeToText是个大对象，属性是区域码，属性值是汉字用法例如：CodeToText['110000']输出北京市
TextToCode是个大对象，属性是汉字，属性值是区域码用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105

以下例子都是vue3+ts的写法，vue3都是按需引入的，用什么就引入什么不然会报错。

element-china-area-data需要和Element Plus的el-cascader级联选择器结合使用。

1.省市二级联动（不带“全部”选项）

<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.省市二级联动（带“全部”选项）

<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.省市区三级联动（不带“全部”选项）

<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.省市区三级联动（带“全部”选项）

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