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)); }) },
//通过传值发请求获取所需要的区域 let getAreaData = (level,parentID,addAll) => { return axios.get("/Management/Prov_City_Area_Street_GetList", { params: { level: level, parentID: parentID, addAll: addAll//不用了，vant可以给每列加入初始值 } }) }; //获取全省，只执行一次 async getAreaListprovince(code1){ let self = this; await getAreaData(0,code1,0).then(msg => { if (msg.status.code == 1) { //console.log(msg.row_data.record) let province_temp = {}; let province = msg.row_data.record//省 //不要在循环中直接操作渲染的数据，存到变量上，之后一次给值 province.forEach(item => { province_temp[item.i] = item.n; //province_temp[\'defaultIndex\'] = 8;初始选中项的索引不好搞https://youzan.github.io/vant/#/zh-CN/picker }) //console.log(province_temp) self.areaList[\'province_list\'] = province_temp; if(this.onlyone==0){ self.areaListTemp[\'province_list\'] = deepClone(province_temp); } } else { self.$toast(msg.status.msg) return; }; }).catch(msg=>{ console.log(msg) //self.$toast(msg) }) }, //获取该省下的城市 //code2:省编码 column:当前操作的列索引 async getAreaListcity(code2,column){ let self = this; await getAreaData(1,code2,0).then(msg => { if (msg.status.code == 1) { let city_temp = {}; let city = msg.row_data.record;//省 //不要在循环中直接操作渲染的数据，存到变量上，之后一次给值 city.forEach(item => { city_temp[item.i] = item.n; }); self.areaList[\'city_list\'] = city_temp; if(code2==11 && this.onlyone==0){ self.areaListTemp[\'city_list\'] = deepClone(city_temp); } //当城市存在并且操作的是选择省，让他自动读出该省下的第一个区 if(city[0].i && column == 0){ self.citycode = city[0].i; self.getAreaListcounty(self.citycode); } } else { self.$toast(msg.status.msg) return; }; }).catch(msg=>{ console.log(msg) //self.$toast(msg) }) }, //获取该城市下的区 //code3:市编码 async getAreaListcounty(code3){ let self = this; await getAreaData(2,code3,0).then(msg => { if (msg.status.code == 1) { let county_temp = {}; let county = msg.row_data.record;//省 county.forEach(item => { county_temp[item.i] = item.n; }) self.areaList[\'county_list\'] = county_temp; if(code3==1101 && this.onlyone==0) { self.areaListTemp[\'county_list\'] = deepClone(county_temp); this.onlyone==1; } } else { self.$toast(msg.status.msg) return; }; }).catch(msg=>{ console.log(msg) //self.$toast(msg) }) },
———————————————————————————–
搜索的时候要模糊查询，可以给每一列加：全国，全省，全市
<van-popup v-model="city_show1" position="bottom"> <van-area title="选择始发地" :area-list="areaList" v-on:confirm="confirm1" cancel-button-text="清空" v-on:cancel="oncancel1" v-on:change="changearea" ref="area1" :columns-placeholder="[\'全国\', \'全省\', \'全市\']"></van-area> </van-popup>
但是在取值的时候麻烦点
confirm1(val){ if(val[0].name == \'\' && val[0].code == \'\'){ //全国情况 val[0].name = \'全国\'; val[0].code = 0; this.OProvince = 0;//始发地省份code(不限或全国时传0) this.OCity = 0;//始发地城市code(不限或全国时传0) this.OArea = 0;//始发地所属区code(不限或全国时传0) this.address1["OProvince"] = \'全国\'; this.address1["OCity"] = \'全省\'; this.address1["OArea"] = \'全市\'; this.address1["OPCode"] = 0; this.address1["OCCode"] = 0; this.address1["OACode"] = 0;//这里必须有值，为了再次点开定位用 this.screenval1 = \'全国\'; }else if(val[1].name == \'\' && val[1].code == \'\'){ //只选了省的情况 val[1].name = \'全省\'; val[1].code = 0; this.OProvince = val[0].code;//始发地省份code(不限或全国时传0) this.OCity = 0;//始发地城市code(不限或全国时传0) this.OArea = 0;//始发地所属区code(不限或全国时传0) this.address1["OProvince"] = val[0].name; this.address1["OCity"] = \'全省\'; this.address1["OArea"] = \'全市\'; this.address1["OPCode"] = val[0].code; this.address1["OCCode"] = 0; this.address1["OACode"] = val[0].code;//这里必须有值，为了再次点开定位用 this.screenval1 = val[0].name; }else if(val[2].name == \'\' && val[2].code == \'\'){ //选了省市，未选区的情况 val[2].name = \'全市\'; val[2].code = 0; this.OProvince = val[0].code;//始发地省份code(不限或全国时传0) this.OCity = val[1].code;//始发地城市code(不限或全国时传0) this.OArea = 0;//始发地所属区code(不限或全国时传0) this.address1["OProvince"] = val[0].name; this.address1["OCity"] = val[1].name; this.address1["OArea"] = \'全市\'; this.address1["OPCode"] = val[0].code; this.address1["OCCode"] = val[1].code; this.address1["OACode"] = val[1].code;//这里必须有值，为了再次点开定位用 this.screenval1 = val[1].name; }else{ //省市区都选了的情况 this.OProvince = val[0].code;//始发地省份code(不限或全国时传0) this.OCity = val[1].code;//始发地城市code(不限或全国时传0) this.OArea = val[2].code;//始发地所属区code(不限或全国时传0) 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.screenval1 = val[1].name + "-" + val[2].name;//始发地不显示省val[0].name + "-" + } this.getData(1,pageSize); this.city_show1 = false; },
版权声明：本文为liufeiran原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。