重点是把从接口得到的数据变异成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)); }) },