阅读量:4
效果展示
依赖包版本
"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省市二级联动 汉字+code regionData, //regionData省市区三级联动 汉字+code pcTextArr, //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> 