ant vue 组件 cascader 封装地址联动选择器

组件基于 antd-vue，需要安装 依赖包 ：element-china-area-data  实现。

<template>
<div>
    <a-form-item :label="label" :required="required">
        <a-cascader :options="regionData" :placeholder="placeholder"
        v-decorator="[`${field}`, {rules:[{required: required, message: message}] }]"/>
    </a-form-item>
</div>

</template>

<script>
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
function getCode(arr){
    let province,city,area,addressCode = []
    if(arr.length>=1){
        province = TextToCode[arr[0]]
        addressCode.push(province.code)
    }
    if(arr.length>=2){
        city = province[arr[1]]
        addressCode.push(city.code)
    }
    if(arr.length==3){
        area = city[arr[2]]
        addressCode.push(area.code)
    }
    return addressCode
}
export default {
    name:"AddressSelection",
    props:{
        placeholder:{
            type:String,
            default:""
        },
        field:{
            type:String,
            default:""
        },
        required:{
            type:Boolean,
            default:true
        },
        message:{
            type:String,
            default:""
        },
        label:{
            type:String,
            default:""
        }
    },
    data(){
        return{
            regionData
        }
    },
    methods:{
        getCode(currentAddress){
            return getCode(currentAddress)
        },
        codeToText(codes){
            let valueArr = []
            codes.forEach(item => {
                 valueArr.push(CodeToText[item])
            });
            return valueArr
        }
    }
}
</script>

<style>

</style>