【Vue】使用ElementUI组件基于element-china-area-data库实现省市区三级联动的组件封装

效果展示

依赖包版本

"element-china-area-data": "^6.1.0",
"element-ui": "2.15.6",

组件代码

// components/chinaAreaCascader/index.vue
<template><el-cascader v-model="val" @change="handleChange" :options="options[type]"/>
</template>
<script>
import { provinceAndCityData,regionData,pcTextArr,pcaTextArr, codeToText} from 'element-china-area-data'
export default {name: 'chinaAreaCascader',props:{value:{ //双向绑定的值type:Array,default:()=>{return []}},// 选项类型type:{type:String,default:'regionData' //默认省市区三级联动}},data(){return {// 选项options:{provinceAndCityData, //provinceAndCityData省市二级联动 汉字+coderegionData, //regionData省市区三级联动 汉字+codepcTextArr, //pcTextArr省市联动数据，纯汉字pcaTextArr, //pcaTextArr省市区联动数据，纯汉字codeToText, //codeToText是个大对象，属性是区域码，属性值是汉字 用法例如：codeToText[‘110000’]输出北京市},val:[] //当前组件的值}},watch:{value:{handler(newVal) {this.val = newVal //绑定外部组件传入的默认值},deep:true}},methods:{// 双向绑定handleChange(){console.log(this.val,'当前选择')this.$emit('input',this.val) //触发input事件，将当前组件的值传给外部组件}}
}
</script>

使用组件

<template><el-form-item label="活动地点" class="mb5" prop="position"><china-area-cascader v-model="formData.position" type="pcaTextArr" /></el-form-item>
</template>
<script>
import ChinaAreaCascader from '@/components/chinaAreaCascader/index.vue'export default {components: { ChinaAreaCascader },data() {formData:{position:[], //省市区位置}}
}
</script>