vant的Area 省市区选择组件

重点是把从接口得到的数据变异成vant组件规定的格式!!

{ province_list: { 110000: '北京市', 120000: '天津市' }, city_list: { 110100: '北京市', 110200: '县', 120100: '天津市', 120200: '县' }, county_list: { 110101: '东城区', 110102: '西城区', 110105: '朝阳区', 110106: '丰台区' 120101: '和平区', 120102: '河东区', 120103: '河西区', 120104: '南开区', 120105: '河北区', // .... } }

而且我发现地区码不用补全6位也好用,神奇!!

从接口获取到数据后:

let province_temp = {};
let province = msg.row_data.record;
province.forEach(item => {
        province_temp[item.i] = item.n;//属性名 = 属性值
})
this.areaList['province_list'] = province_temp;
//这里关键的一步是:不要在循环中直接操作渲染的数据,存到变量上,之后一次给值

市区都是一样的做法

最后我得到的数据为:

this.areaList:{
    province_list:{
    11: "北京市",
    12: "天津市",
    13: "河北省",
    14: "山西省",
    15: "内蒙古自治区",
    ...
    },
    city_list:{
    1101: "市辖区"
    },
    county_list:{
    110101: "东城区",
    110102: "西城区",
    110105: "朝阳区",
    110106: "丰台区",
    ...
    }
}    

html:

<van-cell-group>
                <van-field
                        readonly
                        clickable
                        name="area1"
                        :value="screenval1"
                        label="始发地"
                        placeholder="点击选择省市区"
                        v-on:click="areaSelect1"
                ></van-field>
                <van-popup v-model="city_show1" position="bottom">
                    <van-area title="选择始发地" :area-list="areaList" v-on:confirm="confirm1" v-on:cancel="oncancel1" v-on:change="changearea" ref="area1"></van-area>
                </van-popup>
            </van-cell-group>

js:

data:
screenval1:'', //筛选的地区文字
city_show1: false,//弹出层
address1:{},//始发地提交的信息
screenval1:'', //筛选的地区文字
addarea_map:false,
OriginAddr:'',//发货地址
//选项改变时触发
        changearea(picker, values,column){
            //values当前选中值
            //column当前滑动列索引012
            this.provincecode = Number(values[0].code);//当前省
            this.getAreaListcity(this.provincecode,column);//获取当前省下的城市
            //如果当前省下的城市存在
            if(values[1]){
                //获取该城市的编码,再获取当前城市下的区
                this.citycode = Number(values[1].code);
                this.getAreaListcounty(this.citycode);
            }
        },
//始发地
        areaSelect1(){
            this.city_show1 = true;
            this.cleanarea(1);//清空,并通过地区码定位列表值
        },
oncancel1(){
            this.city_show1 = false;
        },
        //,确定,赋值到input框
confirm1(val){
            this.screenval1 = val[0].name + "-" + val[1].name + "-" + val[2].name;
            this.address_code1 = val[2].code;
            this.address1["OProvince"] = val[0].name;
            this.address1["OCity"] = val[1].name;
            this.address1["OArea"] = val[2].name;
            this.address1["OPCode"] = val[0].code;
            this.address1["OCCode"] = val[1].code;
            this.address1["OACode"] = val[2].code;
            this.city_show1 = false;
        },
//初始化地区
        cleanarea(num){
            let self = this;
            this.areaList = {
                province_list: {},//省
                city_list: {},//市
                county_list: {},//区
            };
            //这里用克隆的数据,所以不用去请求
            this.areaList = deepClone(this.areaListTemp);
            //传入的数字可能有问题
                this.getAreaListprovince(0);
                this.getAreaListcity(Number(this.address1.OPCode));//获取城市,传入省
                this.getAreaListcounty(Number(this.address1.OCCode));//获取区,传入城市

                this.$nextTick(function(){
                    //ref的东西必须放到nextTick里,否则得不到dom
                    //重置地区列表,重置方法reset可以传code字符串来定位当前列表值,但是要传区值370211,可能方法会自动查询省市区!!!
                    self.$refs.area1.reset(String(this.address1.OACode));
                })
        },

 

上一篇:vant 省市区三级联动 自定义json数据展示 取值


下一篇:小程序Vant框架