地区联动插件element-china-area-data的使用(支持vue2和vue3)
省市区联动
自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>
更多推荐
所有评论(0)