vant插件使用area组件使用心得

1.官方给出的方法中的value是设置默认值的，字符串设置成区的就ok

2.areaList是可以自定义的

<template>
    <div class='levelLinkage'
         v-show='chooseshow'>
        <div class='mask'
             @click="close"></div>
        <div class='maskLevel'>

            <!-- 热门城市 -->
            <div class='middle'>
                <p class='font16'>热门城市 <img src="../assets/quxiao.png"
                         style='float:right;'
                         alt=""
                         @click="close"
                         width=22
                         height=22></p>
                <div>
                    <span v-for="(list,index) in hotCityData"
                          :key="index"
                          @click="clickProvince(list,index)"
                          :class="{'active':currIndex===index}"
                          class='hotCity'>{{list.name}}</span>
                </div>
            </div>
            <!-- 控件 -->
            <div class='control'>
                <div>
                    <span class='tittle'> 省份</span>
                    <span class='tittle'> 城市</span>
                    <span class='tittle'> 区县</span>
                </div>
                <van-area :area-list="areaList"
                          ref='area'
                          :visible-item-count='5'
                          :value='value'
                          :defaultIndex='defultIndex'
                          confirm-button-text=''
                          @change='onChange'
                          @confirm="onAddrConfirm" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        chooseshow: {
            type: Boolean
        },
        clickNo: {
            type: String,
            default() {
                return '';
            }
        },
        defultCode: {
            type: Object
        }
    },
    data() {
        return {
            provinceCityD: '请选择',
            currIndex: '',
            hotCityData: [
                { code: '110100', name: '北京', parentCode: '110000', checked: false },
                { code: '310100', name: '上海', parentCode: '310000', checked: false },
                { code: '330100', name: '杭州', parentCode: '330000', checked: false },
                { code: '440100', name: '广州', parentCode: '440000', checked: false },
                { code: '440300', name: '深圳', parentCode: '440000', checked: false },
                { code: '441900', name: '东莞', parentCode: '440000', checked: false },
                { code: '420100', name: '武汉', parentCode: '420000', checked: false },
                { code: '510100', name: '成都', parentCode: '510000', checked: false },
            ],
            value: '1100000',
            show: false,
            isVisible: true,
            defultIndex: 0,
            province_list: {},
            areaList: {
                province_list: {},
                city_list: {},
                county_list: {}
            },
            province: '',
            city: '',
            district: ''
        };
    },
    created() {
        this.vueAjaxProvince();
    },
    watch: {
        defultCode: function (val) {
            if (val.provinceCode && val.cityCode && val.districtCode) {
                this.value = val.provinceCode;
                this.vueAjaxCity(val.provinceCode, val.cityCode);
                this.value = val.districtCode;
            }

        }
    },
    methods: {
        locationProvince() {
            this.value = this.locationCodeList.code;
            this.vueAjaxCity(this.locationCodeList.parentCode, this.locationCodeList.code);
        },
        clickProvince(list, index) {
            this.currIndex = index;
            this.value = list.code;
            this.vueAjaxCity(list.parentCode, list.code);
        },
        click() {
            this.show = true;
        },
        vueAjaxProvince() {
            let that = this;
            this.$API.queryProvincesCityAreaByCode({ parentCode: 100000 }).then(res => {
                let result = res.data.data.data;
                let province_list = {};
                for (let i = 0; i < result.length; i++) {
                    province_list[result[i].code] = result[i].name;
                }
                that.areaList['province_list'] = province_list;
                if (that.clickNo === 'send' && that.locationCodeList) {//如果是寄件
                    that.vueAjaxCity(that.locationCodeList.parentCode, that.locationCodeList.code);
                } else {
                    let parentCode = 110000;
                    that.vueAjaxCity(parentCode);
                }

            });
        },
        vueAjaxCity(parentCode, code) {
            let that = this;
            // this.loading = this.$toast.loading();
            this.$API.queryProvincesCityAreaByCode({ parentCode: parentCode }).then(res => {
                let result = res.data.data.data;
                let city_list = {};
                for (let i = 0; i < result.length; i++) {
                    city_list[result[i].code] = result[i].name;
                }
                that.areaList['city_list'] = city_list;
                if (code) {
                    parentCode = code;
                } else {
                    parentCode = Object.keys(city_list)[0];
                }
                that.vueAjaxdirect(parentCode);
            });
        },
        vueAjaxdirect(parentCode) {
            let that = this;
            // this.loading = this.$toast.loading();
            this.$API.queryProvincesCityAreaByCode({ parentCode: parentCode }).then(res => {
                let result = res.data.data.data;
                let county_list = {};
                for (let i = 0; i < result.length; i++) {
                    county_list[result[i].code] = result[i].name;
                }
                that.hotCityData.map(function (value, index) {
                    if (value.code === parentCode) {
                        that.currIndex = index;
                    }
                });
                that.areaList['county_list'] = county_list;
            });
        },
        //点击确定按钮
        onAddrConfirm(e) {
            if (e[0] && e[1] && e[2] && e[1]) {
                this.province = e[0].name;
                this.city = e[1].name;
                this.district = e[2].name;
                this.provinceCityD = e[0].name + '-' + e[1].name + '-' + e[2].name;
                if (this.clickNo === 'addressBook') {//地址薄页面
                    this.$emit('provinceData', e);
                } else if (this.clickNo === 'send') {
                    this.$emit('func', this.provinceCityD, e[1].code, e[2].code);
                } else {
                    this.$emit('funcild', this.provinceCityD, e[1].code, e[2].code);
                }
                this.$emit('update:chooseshow', false);
            } else {
                this.$refs.area.reset();
            }

        },
        //value=0改变省，1改变市，2改变区
        onChange(picker, index, value) {
            let val = picker.getValues();
            if (value === 0) {
                let parentCode = val[0].code;
                this.value = parentCode;
                this.vueAjaxCity(parentCode);
            } else if (value === 1) {
                let parentCode = val[value].code;
                this.value = parentCode;
                this.vueAjaxdirect(parentCode);
            }
        },
        close() {
            this.$emit('update:chooseshow', false);
        }
    }
};
</script>
<style lang='scss' scoped>
.levelLinkage {
    width: 100%;
    height: 100vh;
    .font16 {
        font-size: 16px;
    }
    .mask {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        z-index: 1;
        background: rgba(0, 0, 0, 0.5);
    }
    .maskLevel {
        background-color: #fff;
        position: fixed;
        bottom: 70px;
        width: 100%;
        z-index: 1;
        .header {
            width: 100%;
            height: 93px;
            padding: 15px 20px 10px 20px;
            border-bottom: 1px solid #e8e8e8;
            p {
                line-height: 30px;
                img {
                    vertical-align: middle;
                }
                span {
                    margin-left: 10px;
                }
            }
        }
        .middle {
            margin: 10px 0 20px 0;
            p {
                padding: 5px 20px 15px 20px;
                border-bottom: 1px solid #e8e8e8;
            }
            .center {
                text-align: center;
            }
            .hotCity {
                display: inline-block;
                margin-left: 5%;
                margin-top: 10px;
                width: 18%;
                height: 30px;
                background-color: #f0f0f0;
                line-height: 30px;
                text-align: center;
                border-radius: 2px;
            }
            .active {
                background: rgba(255, 250, 236, 1);
                border: 1px solid #fdb60c;
                color: #fda20c;
            }
        }
    }
    .control {
        .tittle {
            display: inline-block;
            margin-left: 3%;
            margin-top: 10px;
            width: 30%;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    }
    .footer {
        position: fixed;
        bottom: 0px;
        width: 100%;
        height: 70px;
        box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.1);
        .operaBtn {
            width: 90%;
            height: 50px;
            background-color: #fdb60c;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            line-height: 50px;
            color: #fff;
            border-radius: 4px;
        }
    }
    /deep/.van-picker__toolbar {
        width: 100%;
        height: 70px;
        position: absolute;
        bottom: -70px;
        background-color: #fff;
        box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.1);
    }
    /deep/ .van-picker__cancel {
        display: none;
    }
    /deep/.van-picker__confirm {
        text-align: center;
        line-height: 50px;
        width: 90%;
        height: 50px;
        background-color: #fdb60c;
        color: #fff;
        margin-left: 5%;
        border-radius: 4px;
    }
    /deep/.van-ellipsis {
        white-space: normal;
    }
    /deep/.van-picker-column__item--selected {
        color: #fdb60c;
    }
}
</style>

上面直接引用的成熟的组件，对code要求很高，必须是6位，且前两位表示省，中间两位表示城市，后两位表示区，要求公司后端返回的code值必须是官方要求的，一旦有哪个省市区的code与官方要求不一致，那么这个区值就渲染不出来

下面是针对自定义组件，对code无要求

<template>
    <div class='levelLinkage'
         v-show='chooseshow'>
        <div class='mask'
             @click="close"></div>
        <div class='maskLevel' :class="{'statics':statictrue===true}">  
            <!-- <div style='height:30vh;width:100%;'></div> -->
            <div class='header' v-if='detailAddress!==""'>
                <p class='font16'>当前地址<img src="../../assets/image/quxiao.png"
                         style='float:right;'
                         alt=""
                         @click="close"
                         width=22
                         height=22></p>
                <p><img src="../../assets/image/location.png"
                         alt=""
                         width=18
                         height=22><span>{{detailAddress}}</span></p>
            </div>
            <!-- 搜索 -->
            <div v-if='this.clickNo=="地址薄"'>
                <!-- <input type="text" value='fsffffffffff'>
                <van-search v-model="search"   placeholder="请输入省份/城市/市区搜索" show-action  shape="round" @search="onSearch">
                        <div slot="right-icon">
                                <span @click="onSearch">搜索</span>
                        </div>
                        <template #action>
                            <div @click="onSearch">搜索</div>
                        </template>
                </van-search> -->
                <van-search v-model="search" @focus="staticfoc" @blur="staticblu" show-action @input='onSearch'  placeholder="请输入搜索关键词" @search="onSearch">
                    <template #action>
                        <div @click="onSearch" style='background:#392E4D;color:#fff;padding:0 15px;margin-left:15px;border-radius: 5px;'>搜索</div>
                    </template>
                </van-search>
                <ul class='provinceslistWrap' v-if='searchProvinceData.length>0'>
                    <li v-for="(list,index) in searchProvinceData"  :key="index" @click="choiceSearchlist(list)">
                        <span :class="{'listcolor':provincetrue===true}">{{list.provinceName}}</span>-
                        <span :class="{'listcolor':citytrue===true}">{{list.cityName}}</span>-
                        <span :class="{'listcolor':directrue===true}">{{list.countyName}}</span>
                    </li>
                </ul>
             </div>
            <!-- 热门城市 -->
            <div class='middle'>
                <p class='font16'>热门城市</p>
                <div>
                    <span v-for="(list,index) in hotCityData"
                          :key="index"
                          @click="clickProvince(list,index)"
                          :class="{'active':currIndex===index}"
                          class='hotCity'>{{list.name}}</span>
                </div>
            </div>
            <!-- 控件 -->
            <div class='control'>
                <div>
                    <span class='tittle'> 省份</span>
                    <span class='tittle'> 城市</span>
                    <span class='tittle'> 区县</span>
                </div>
                <van-picker show-toolbar :visible-item-count='3' ref='picker' value-key="areaName"   :columns="columns" @change="onChange"   @confirm="onAddrConfirm"  />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        chooseshow: {
            type: Boolean
        },
        clickNo: {
            type: String,
            default() {
                return '';
            }
        },
        detailAddress: {
            type: String
        },
        codelist: {
            type: Object
        }
    },
    data() {
        return {
            provinceCityD: '请选择',
            currIndex: '',
            hotCityData: [
                { code: '110100', name: '北京',text:'北京市', parentArea: '110000',parentName:'北京', checked: false },
                { code: '310100', name: '上海', text:'上海市',parentArea: '310000',parentName:'上海', checked: false },
                { code: '330100', name: '杭州',text:'杭州市', parentArea: '330000',parentName:'浙江省', checked: false },
                { code: '440100', name: '广州',text:'广州市', parentArea: '440000',parentName:'广东省', checked: false },
                { code: '440300', name: '深圳',text:'深圳市', parentArea: '440000',parentName:'广东省', checked: false },
                { code: '441900', name: '东莞',text:'东莞市', parentArea: '440000',parentName:'广东省', checked: false },
                { code: '420100', name: '武汉',text:'武汉市', parentArea: '420000',parentName:'湖北省', children:'蔡甸区',checked: false },
                { code: '510100', name: '成都',text:'成都市', parentArea: '510000',parentName:'四川省', checked: false },
            ],
            value: '北京',
            show: false,
            isVisible: true,
            defultIndex: 9,
            province_list: {},
            // areaList: {
            //     province_list: {},
            //     city_list: {},
            //     county_list: {}
            // },
            bfcountylist:[],//备份区数据
            province: '',
            city: '',
            district: '',
            areaList: [
                // {
                //     text: '浙江',
                //     children: [
                //         {
                //             text: '杭州',
                //             children: [{ text: '西湖区',valueKey:'101000' }, { text: '余杭区' }],
                //         },
                //         {
                //             text: '温州',
                //             children: [{ text: '鹿城区' }, { text: '瓯海区' }],
                //         },
                //     ],
                // },
                // {
                //     text: '福建',
                //     children: [
                //         {
                //             text: '福州',
                //             children: [{ text: '鼓楼区' }, { text: '台江区' }],
                //         },
                //         {
                //             text: '厦门',
                //             children: [{ text: '思明区' }, { text: '海沧区' }],
                //         },
                //     ],
                // },
            ],
            columns:[],
            loading:true,
            proIdx:0,
            search:'',
            searchProvinceData:[],
            provincetrue:false,
            citytrue:false,
            directrue:false,
            statictrue:false,
            docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
            showHeight: document.documentElement.clientHeight,   //实时屏幕高度
            hidshow: true,  //显示或者隐藏footer,


        };
    },
    created(){
        this.vueAjaxProvince();
        
    },
    mounted() {
        let that=this;
        window.onresize = () => {
            return (() => {
                window.fullHeight = document.documentElement.clientHeight;
                that.showHeight = window.fullHeight;
            })();
        };
    },
    watch: {
        showHeight(val) {
            let that = this;
            if (that.docmHeight > val){
                that.statictrue = true;
            } else{
                that.statictrue = false;
            }
        },
        codelist:{
            handler(val){
                // console.log(val, '===========');
                if(val.province){
                    if (val.provinceCode && val.cityCode && val.districtCode) {
                        setTimeout(() => {
                            this.$refs.picker.setColumnValue(0,val.province);
                            let ColumnIndex =  this.$refs.picker.getColumnIndex(0);
                            this.vueAjaxCity(val.provinceCode,ColumnIndex, false).then(()=>{
                                this.$refs.picker.setColumnValue(0,val.province);
                                this.$refs.picker.setColumnValue(1,val.city);
                                let cityindex =  this.$refs.picker.getColumnIndex(1);
                                this.vueAjaxdirect(val.cityCode, ColumnIndex,cityindex).then(()=>{
                                    this.$refs.picker.setColumnValue(0,val.province);
                                    this.$refs.picker.setColumnValue(1,val.city);
                                    this.$refs.picker.setColumnValue(2,val.district);
                                });
                            });
      
                        }, 1000);
                        
                    }
                }else{
                    // console.log('wuwuwuwuwuw ');
                    // this.vueAjaxProvince();
                }
            },
        },
    },
    methods: {
        staticfoc(){
            // this.statictrue=true;
        },
        staticblu(){
            // this.statictrue=false;
        },
        //地址薄智能解析识别
        jiexi(val) {
            if (val.provinceCode && val.cityCode) {
                setTimeout(() => {
                    this.currIndex=-1;
                    this.$refs.picker.setColumnValue(0,val.provinceName);
                    let ColumnIndex =  this.$refs.picker.getColumnIndex(0);
                    this.vueAjaxCity(val.provinceCode,ColumnIndex, false).then(()=>{
                        this.$refs.picker.setColumnValue(0,val.provinceName);
                        this.$refs.picker.setColumnValue(1,val.cityName);
                        let cityindex =  this.$refs.picker.getColumnIndex(1);
                        this.vueAjaxdirect(val.cityCode, ColumnIndex,cityindex).then(()=>{
                            this.$refs.picker.setColumnValue(0,val.provinceName);
                            this.$refs.picker.setColumnValue(1,val.cityName);
                            if(val.areaName&&val.areaName!=''){
                                this.$refs.picker.setColumnValue(2,val.areaName);
                            }
                        });
                    });
      
                }, 10);
                        
            }
        },
        // 搜索
        onSearch(){
            if(this.search!=''&&this.search.length>1){
                let that=this;
                this.$api.addqueryAreaLike({ areaName:that.search }).then(res => {
                    if(res.data.code===0){
                        that.searchProvinceData=res.data.data;
                        let a=that.searchProvinceData.some(function (el,index){
                            return (el.provinceName.indexOf(that.search)!=-1);
                        });
                        if(a){
                            that.provincetrue=true;
                            that.citytrue=false;
                            that.directrue=false;
                            return;
                        }
                        let b=that.searchProvinceData.some(function (el,index){
                            return (el.cityName.indexOf(that.search)!=-1);
                        });
                        if(b){
                            that.provincetrue=false;
                            that.citytrue=true;
                            that.directrue=false;
                            return;
                        }
                        let c=that.searchProvinceData.some(function (el,index){
                            return (el.countyName.indexOf(that.search)!=-1);
                        });
                        if(c){
                            that.provincetrue=false;
                            that.citytrue=false;
                            that.directrue=true;
                            return;
                        }
                    }
                });
            }else{
                this.searchProvinceData=[];
                this.provincetrue=false;
                this.citytrue=false;
                this.directrue=false;
            }
        },
        onCtrol(){
            this.provincetrue=false;
            this.citytrue=false;
            this.directrue=false;
            this.searchProvinceData=[];
            this.search='';
        },
        //搜索选择
        choiceSearchlist(item){
            // console.log(item);
            this.provinceCityD=item.provinceName+'-'+item.cityName+'-'+item.countyName;
            let params={
                province:item.provinceName,
                provinceCode:item.provinceCode,
                city:item.cityName,
                cityCode:item.cityCode,
                district:item.countyName,
                districtCode:item.countyCode,
            };
            this.$emit('funcild', this.provinceCityD,params);
            this.search='';
            this.searchProvinceData=[];
            item['areaName']=item.countyName;
            this.jiexi(item);
            this.$emit('update:chooseshow', false);
        },
        locationProvince() {
            this.value = this.locationCodeList.code;
            this.vueAjaxCity(this.locationCodeList.parentCode, this.locationCodeList.code);
        },
        clickProvince(list, index) {
            this.currIndex = index;
            // this.loading=true;
            this.$refs.picker.setColumnValue(0,list.parentName);
            let ColumnIndex =  this.$refs.picker.getColumnIndex(0);
            let parCode=this.columns[ColumnIndex].areaCode;
            this.vueAjaxCity(parCode,ColumnIndex).then(()=>{
                this.$refs.picker.setColumnValue(0,list.parentName);
                this.$refs.picker.setColumnValue(1,list.text);
                this.$refs.picker.getIndexes(1);
                let a=this.$refs.picker.getIndexes();
                let cityindex=a[1];
                // console.log('index',a[1]);
                this.vueAjaxdirect(list.code,ColumnIndex,cityindex).then(()=>{
                    let that=this;
                    this.$refs.picker.setColumnValue(0,list.parentName);
                    this.$refs.picker.setColumnValue(1,list.text);
                    this.$refs.picker.setColumnValue(2,that.columns[ColumnIndex].children[cityindex].children);
                    // console.log(that.columns[ColumnIndex].children[cityindex].children);
                });
            });
        },
        click() {
            this.show = true;
        },
        async vueAjaxProvince(isAjax = true) {

            let that = this;
            const res=   await this.$api.queryProvincesCityAreaByCode({ areaType: 2});
            if(Array.isArray(res.data)){
                // that.sortData(res.data);
                that.areaList=res.data;
                if(isAjax){
                    that.vueAjaxCity(that.areaList[0].areaCode,0);
                }
                
            }
        },
        async vueAjaxCity(parentArea,index, isAjax = true) {
            let that = this;
            const res=   await this.$api.queryProvincesCityAreaByCode({areaType: 3 ,parentArea:parentArea });
            // this.loading=false;
            if(res.status===2000){
                let children=res.data;
                if( Array.isArray(res.data)){
                    that.areaList[index]['children']=children;
                    if(isAjax){
                        // console.log('走了。。。。');
                        await that.vueAjaxdirect(that.areaList[index].children[0].areaCode,index,0);
                    }
                    
                }
                    
                    
                    
            }else{
                that.areaList[index]['children'] = [{areaName:''}];
                that.areaList[index].children[0]['children'] = [{areaName:''}];
                this.$toast(res.data);
            }
        
        },
        async vueAjaxdirect(parentArea,proindex,cityindex) {
            let that = this;
            const res=   await  this.$api.queryProvincesCityAreaByCode({ areaType: 4,parentArea:parentArea  });
            // this.loading=false;
            if(res.status===2000){
                if(Array.isArray(res.data)){
                    let children=that.sortData(res.data);
                    that.hotCityData.map(function (value, index) {
                        if (value.code === parentArea) {
                            that.currIndex = index;
                        }
                    });
                    that.areaList[proindex].children[cityindex]['children']=children;
                    that.columns=that.areaList;
                }
            }else{
                that.areaList[proindex].children[cityindex]['children'] = [{areaName:''}];
                that.columns=that.areaList;
                this.$toast(res.data);
            }
            
        },
        //数据结果排序
        sortData(arr){
            let rea = arr.sort(function (a, b) {
                if (a.areaName) {
                    return a.areaName.localeCompare(b.areaName, 'zh-CN');
                }
            });
            let handleArr = ['香港', '澳门', '台湾'];
            rea.forEach((item, i) => {
                let num = handleArr.indexOf(item.areaName);
                if (num !== -1) {
                    rea.splice(i, 1);
                    handleArr[num] = item;
                }
            });
            return rea;
        },
        //点击确定按钮
        onAddrConfirm(val) {
            if(val[0]&&val[1]&&val[2]){
                let a=this.$refs.picker.getIndexes();
                let e=[{
                    code:this.columns[a[0]].areaCode,
                    name:this.columns[a[0]].areaName,

                },{
                    code:this.columns[a[0]].children[a[1]].areaCode,
                    name:this.columns[a[0]].children[a[1]].areaName,
                },{
                    code:this.columns[a[0]].children[a[1]].children[a[2]].areaCode,
                    name:this.columns[a[0]].children[a[1]].children[a[2]].areaName,
                }];
                if (e[0] && e[1] && e[2] && e[1]) {
                    this.province = e[0].name;
                    this.city = e[1].name;
                    this.district = e[2].name;
                    this.provinceCityD = e[0].name + '-' + e[1].name + '-' + e[2].name;
                    if(this.clickNo==='start'){
                        this.$emit('funcstart', this.provinceCityD, e[1].code, e[2].code);
                    }else if(this.clickNo==='end'){
                        this.$emit('funcend', this.provinceCityD, e[1].code, e[2].code);
                    }else if(this.clickNo==='realname'){
                        this.$emit('funcild', e[0].name, e[1].name,e[2].name, e[0].code,e[1].code, e[2].code,this.provinceCityD);
                    }else{
                        let params={
                            province:e[0].name,
                            provinceCode:e[0].code,
                            city:e[1].name,
                            cityCode:e[1].code,
                            district:e[2].name,
                            districtCode:e[2].code,
                        };
                        this.$emit('funcild', this.provinceCityD,params);
                    }
                    this.$emit('update:chooseshow', false);
                } 
            }
        },
        onChange(picker,values,index) {
            let provinceIndex=picker.getColumnIndex(0);
            let proIndex = picker.getColumnIndex(0);
            this.proIdx=proIndex;
            let citIndex = picker.getColumnIndex(1);
            if(index == 0){
                this.currIndex=-1;
                // this.loading=true;
                // picker.setColumnValues(1, []);
                // picker.setColumnValues(2, []);
                let ColumnIndex = picker.getColumnIndex(0);
                let parCode=this.columns[ColumnIndex].areaCode;
                this.vueAjaxCity(parCode,ColumnIndex).then(()=>{
                    picker.setColumnValues(1, this.columns[proIndex].children==undefined?[]:this.columns[proIndex].children);
                    if(this.columns[proIndex].children){
                        picker.setColumnValues(2, this.columns[proIndex].children[0].children==undefined?[]:this.columns[proIndex].children[0].children);
                    }
                });
            }else if(index == 1){
                // this.loading=true;
                picker.setColumnValues(2, []); 
                let idex = picker.getColumnIndex(index);
                let parCode=this.columns[proIndex].children[idex].areaCode;
                this.vueAjaxdirect(parCode,proIndex,idex).then(() =>{
                    picker.setColumnValues(2, this.columns[proIndex].children[idex].children==undefined?[]:this.columns[proIndex].children[idex].children); 
                });
                    
            }
        },
        close() {
            this.searchProvinceData=[];
            this.search='';
            this.$emit('update:chooseshow', false);
        }
    }
};
</script>
<style lang='scss' scoped>
.levelLinkage {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left:0;
    z-index:200;
    background: rgba(0, 0, 0, 0.5);
    /deep/.van-picker__loading{
        background-color: rgba(255,255,255,.1);
    }
    .font16 {
        font-size: 16px;
    }
    .listcolor{
        color:#FFAF00;
    }
    .mask {
        //  width: 100%;
        height: 40vh;
        //  height:calc(100vh - 80vh);
        // position: fixed;
        // top: 0;
        // left: 0;
        z-index: 100;
        // background: rgba(0, 0, 0, 0.5);
    }
    .maskLevel {
         background-color: #fff;
         height:auto;
        //  height:calc(100vh - 20vh);
        // margin-top: -100px;
        position: absolute;
        bottom: 70px;
        left: 0;
        // overflow:scroll;
        width: 100%;
        z-index: 200;
        &.statics{
            position: static;
            // bottom: 0;
        }
        .header {
            // display: none;
            width: 90%;
            // height: 93px;
            padding: 20px 10px 20px;
            border-bottom: 1px solid #e8e8e8;
            p {
                line-height: 30px;
                img {
                    vertical-align: middle;
                }
                span {
                    margin-left: 10px;
                }
            }
        }
        .middle {
            margin: 10px 0 20px 0;
            p {
                padding: 5px 0 5px 20px;
            }
            .center {
                text-align: center;
            }
            .hotCity {
                font-size: 15px;
                display: inline-block;
                margin-left: 5%;
                margin-top: 10px;
                width: 18%;
                height: 30px;
                background-color: #f0f0f0;
                line-height: 30px;
                text-align: center;
                border-radius: 2px;
                border: 1px solid #f0f0f0;
            }
            .active {
                background: #F0EAFF;
                border: 1px solid #9A7AED;
                color: #9A7AED;
            }
        }
    }
    //检索
    .provinceslistWrap{
        // position: absolute;
        background-color: #fff;
        width: 100%;
        // height: 200px;
        height:380px;
        overflow-y: scroll;
        z-index: 200;
        padding-bottom: 50px;
        position: absolute;
        li{
            border-bottom:1px solid #eee;
            margin:20px;
            padding:5px 0;
        }
    }
    .control {
        .tittle {
            display: inline-block;
            margin-left: 3%;
            margin-top: 10px;
            width: 28%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 15px;
        }
            /deep/.van-picker__toolbar {
        width: 100%;
        height: 70px;
        position: absolute;
        bottom: -70px;
        background-color: #fff;
        // box-shadow: 7px 0 0 0 rgba(0, 0, 0, 0.5);
    }
    /deep/ .van-picker__cancel {
        display: none;
    }
    /deep/.van-picker__confirm {
        text-align: center;
        line-height: 40px;
        width: 90%;
        height: 40px;
        background-color: #392E4D;
        color: #fff;
        margin-left: 5%;
        border-radius: 20px;
        margin-top: 10px;
    }
    // /deep/.van-ellipsis {
    //     white-space: normal;
    // }
    /deep/.van-picker-column__item--selected {
        color: #9A7AED;
    }
    }
    .footer {
        position: fixed;
        bottom: 0px;
        width: 100%;
        height: 70px;
        box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.1);
        .operaBtn {
            width: 90%;
            height: 50px;
            background-color: #9A7AED;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            line-height: 50px;
            color: #fff;
            border-radius: 4px;
        }
    }
}
</style>