效果展示
依赖包版本
"element-china-area-data": "^6.1.0",
"element-ui": "2.15.6",
组件代码
<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,
regionData,
pcTextArr,
pcaTextArr,
codeToText,
},
val:[]
}
},
watch:{
value:{
handler(newVal) {
this.val = newVal
},
deep:true
}
},
methods:{
handleChange(){
console.log(this.val,'当前选择')
this.$emit('input',this.val)
}
}
}
</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>