需求:需要实现省市区的三级联动或者二级联动的功能,找了半天找到这个最简单的插件实现,无需自己找json,直接下载导入就有了。
插件地址:element-china-area-data - npm (npmjs.com)
里面有使用方法,我就是跟着里面的方法写的,此贴就是记录贴。
1.效果
2.下载插件
我下的最新版,这边要注意一下,有些小伙伴下的是旧版,旧版的**codeToText是大写的C,**新版改成小写了
npm install element-china-area-data
3.导入
这个根据需求导入哈
字段讲解:
- provinceAndCityData
:
省市二级联动数据,汉字+code - regionData
:
省市区三级联动数据 - pcTextArr
:
省市联动数据,纯汉字 - pcaTextArr
:
省市区联动数据,纯汉字 - codeToText
:
是个大对象,属性是区域码,属性值是汉字 用法例如:codeToText['110000']
输出北京市
javascript
import {
provinceAndCityData,
pcTextArr,
regionData,
pcaTextArr,
codeToText,
} from "element-china-area-data"; //导入地图数据
4.二级联动使用
javascript
<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>
效果
5.省市区三级联动
javascript
<template>
<div class="content-box">
<div class="container">
<el-cascader
size="large"
clearable
ref="cascader"
:options="options"
v-model="params.selectedOptions"
@change="handleChange"
class="w250"
>
</el-cascader>
</div>
</div>
</template>
<script>
import {
provinceAndCityData,
pcTextArr,
regionData,
pcaTextArr,
codeToText,
} from "element-china-area-data"; //导入地图数据
export default {
data() {
return {
options: regionData,
params: {
//params为向后台发送请求的请求体,为什么要将selectedOptions写在请求体中请向后看
selectedOptions: [],
}
};
},
mounted(){
console.log(provinceAndCityData,'二级市区');
},
methods: {
// 地图
handleChange(e) {
console.log(e,'省市区');
}
}
};
</script>
<style lang="scss" scoped></style>
还有其他的可以自行探索,文章到此结束,希望对你有所帮助~