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

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

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

从接口获取到数据后：

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

市区都是一样的做法

最后我得到的数据为：

  1. this.areaList:{
  2.     province_list:{
  3.     11: "北京市",
  4.     12: "天津市",
  5.     13: "河北省",
  6.     14: "山西省",
  7.     15: "内蒙古自治区",
  8.     ...
  9.     },
  10.     city_list:{
  11.     1101: "市辖区"
  12.     },
  13.     county_list:{
  14.     110101: "东城区",
  15.     110102: "西城区",
  16.     110105: "朝阳区",
  17.     110106: "丰台区",
  18.     ...
  19.     }
  20. }

html:

  1. <van-cell-group>
  2.                 <van-field
  3.                         readonly
  4.                         clickable
  5.                         name="area1"
  6.                         :value="screenval1"
  7.                         label="始发地"
  8.                         placeholder="点击选择省市区"
  9.                         v-on:click="areaSelect1"
  10.                 ></van-field>
  11.                 <van-popup v-model="city_show1" position="bottom">
  12.                     <van-area title="选择始发地" :area-list="areaList" v-on:confirm="confirm1" v-on:cancel="oncancel1" v-on:change="changearea" ref="area1"></van-area>
  13.                 </van-popup>
  14.             </van-cell-group>

js:

  1. data:
  2. screenval1:\'\', //筛选的地区文字
  3. city_show1: false,//弹出层
  4. address1:{},//始发地提交的信息
  5. screenval1:\'\', //筛选的地区文字
  6. addarea_map:false,
  7. OriginAddr:\'\',//发货地址
  1. //选项改变时触发
  2.         changearea(picker, values,column){
  3.             //values当前选中值
  4.             //column当前滑动列索引012
  5.             this.provincecode = Number(values[0].code);//当前省
  6.             this.getAreaListcity(this.provincecode,column);//获取当前省下的城市
  7.             //如果当前省下的城市存在
  8.             if(values[1]){
  9.                 //获取该城市的编码，再获取当前城市下的区
  10.                 this.citycode = Number(values[1].code);
  11.                 this.getAreaListcounty(this.citycode);
  12.             }
  13.         },
  14. //始发地
  15.         areaSelect1(){
  16.             this.city_show1 = true;
  17.             this.cleanarea(1);//清空，并通过地区码定位列表值
  18.         },
  19. oncancel1(){
  20.             this.city_show1 = false;
  21.         },
  22.         //，确定，赋值到input框
  23. confirm1(val){
  24.             this.screenval1 = val[0].name + "-" + val[1].name + "-" + val[2].name;
  25.             this.address_code1 = val[2].code;
  26.             this.address1["OProvince"] = val[0].name;
  27.             this.address1["OCity"] = val[1].name;
  28.             this.address1["OArea"] = val[2].name;
  29.             this.address1["OPCode"] = val[0].code;
  30.             this.address1["OCCode"] = val[1].code;
  31.             this.address1["OACode"] = val[2].code;
  32.             this.city_show1 = false;
  33.         },
  34. //初始化地区
  35.         cleanarea(num){
  36.             let self = this;
  37.             this.areaList = {
  38.                 province_list: {},//省
  39.                 city_list: {},//市
  40.                 county_list: {},//区
  41.             };
  42.             //这里用克隆的数据，所以不用去请求
  43.             this.areaList = deepClone(this.areaListTemp);
  44.             //传入的数字可能有问题
  45.                 this.getAreaListprovince(0);
  46.                 this.getAreaListcity(Number(this.address1.OPCode));//获取城市，传入省
  47.                 this.getAreaListcounty(Number(this.address1.OCCode));//获取区，传入城市
  48.  
  49.                 this.$nextTick(function(){
  50.                     //ref的东西必须放到nextTick里，否则得不到dom
  51.                     //重置地区列表，重置方法reset可以传code字符串来定位当前列表值，但是要传区值370211，可能方法会自动查询省市区！！！
  52.                     self.$refs.area1.reset(String(this.address1.OACode));
  53.                 })
  54.         },

 

  1. //通过传值发请求获取所需要的区域
  2. let getAreaData = (level,parentID,addAll) => {
  3.     return axios.get("/Management/Prov_City_Area_Street_GetList", {
  4.                 params: {
  5.                     level: level,
  6.                     parentID: parentID,
  7.                     addAll: addAll//不用了，vant可以给每列加入初始值
  8.                 }
  9.             })
  10. };
  11. //获取全省，只执行一次
  12.         async getAreaListprovince(code1){
  13.             let self = this;
  14.             await getAreaData(0,code1,0).then(msg => {
  15.                 if (msg.status.code == 1) {
  16.                     //console.log(msg.row_data.record)
  17.                     let province_temp = {};
  18.                     let province = msg.row_data.record//省
  19.                     //不要在循环中直接操作渲染的数据，存到变量上，之后一次给值
  20.                     province.forEach(item => {
  21.                         province_temp[item.i] = item.n;
  22.                         //province_temp[\'defaultIndex\'] = 8;初始选中项的索引不好搞https://youzan.github.io/vant/#/zh-CN/picker
  24.                     })
  25.                     //console.log(province_temp)
  26.                     self.areaList[\'province_list\'] = province_temp;
  27.                     if(this.onlyone==0){
  28.                         self.areaListTemp[\'province_list\'] = deepClone(province_temp);
  29.                     }
  31.                 } else {
  32.                     self.$toast(msg.status.msg)
  33.                     return;
  34.                 };
  35.             }).catch(msg=>{
  36.                 console.log(msg)
  37.                 //self.$toast(msg)
  38.             })
  40.         },
  41.         //获取该省下的城市
  42.         //code2:省编码    column:当前操作的列索引
  43.         async getAreaListcity(code2,column){
  44.             let self = this;
  45.             await getAreaData(1,code2,0).then(msg => {
  46.                 if (msg.status.code == 1) {
  47.                     let city_temp = {};
  48.                     let city = msg.row_data.record;//省
  49.                     //不要在循环中直接操作渲染的数据，存到变量上，之后一次给值
  50.                     city.forEach(item => {
  51.                         city_temp[item.i] = item.n;
  52.                     });
  53.                     self.areaList[\'city_list\'] = city_temp;
  54.                     if(code2==11 && this.onlyone==0){
  55.                         self.areaListTemp[\'city_list\'] = deepClone(city_temp);
  56.                     }
  58.                     //当城市存在并且操作的是选择省，让他自动读出该省下的第一个区
  59.                     if(city[0].i && column == 0){
  60.                         self.citycode = city[0].i;
  61.                         self.getAreaListcounty(self.citycode);
  62.                     }
  63.                 } else {
  64.                     self.$toast(msg.status.msg)
  65.                     return;
  66.                 };
  67.             }).catch(msg=>{
  68.                 console.log(msg)
  69.                 //self.$toast(msg)
  70.             })
  71.         },
  72.         //获取该城市下的区
  73.         //code3:市编码
  74.         async getAreaListcounty(code3){
  75.             let self = this;
  76.             await getAreaData(2,code3,0).then(msg => {
  77.                 if (msg.status.code == 1) {
  78.                     let county_temp = {};
  79.                     let county = msg.row_data.record;//省
  80.                     county.forEach(item => {
  81.                         county_temp[item.i] = item.n;
  82.                     })
  83.                     self.areaList[\'county_list\'] = county_temp;
  84.                     if(code3==1101 && this.onlyone==0) {
  85.                         self.areaListTemp[\'county_list\'] = deepClone(county_temp);
  86.                         this.onlyone==1;
  87.                     }
  89.                 } else {
  90.                     self.$toast(msg.status.msg)
  91.                     return;
  92.                 };
  93.             }).catch(msg=>{
  94.                 console.log(msg)
  95.                 //self.$toast(msg)
  96.             })
  97.         },

 

 

———————————————————————————–

 

 

搜索的时候要模糊查询，可以给每一列加：全国，全省，全市

  1. <van-popup v-model="city_show1" position="bottom">
  2.         <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>
  3. </van-popup>

但是在取值的时候麻烦点

  1. confirm1(val){
  2.             if(val[0].name == \'\' && val[0].code == \'\'){
  3.                 //全国情况
  4.                 val[0].name = \'全国\';
  5.                 val[0].code = 0;
  6.                 this.OProvince = 0;//始发地省份code(不限或全国时传0)
  7.                 this.OCity = 0;//始发地城市code(不限或全国时传0)
  8.                 this.OArea = 0;//始发地所属区code(不限或全国时传0)
  9.                 this.address1["OProvince"] = \'全国\';
  10.                 this.address1["OCity"] = \'全省\';
  11.                 this.address1["OArea"] = \'全市\';
  12.                 this.address1["OPCode"] = 0;
  13.                 this.address1["OCCode"] = 0;
  14.                 this.address1["OACode"] = 0;//这里必须有值，为了再次点开定位用
  15.                 this.screenval1 = \'全国\';
  16.             }else if(val[1].name == \'\' && val[1].code == \'\'){
  17.                 //只选了省的情况
  18.                 val[1].name = \'全省\';
  19.                 val[1].code = 0;
  20.                 this.OProvince = val[0].code;//始发地省份code(不限或全国时传0)
  21.                 this.OCity = 0;//始发地城市code(不限或全国时传0)
  22.                 this.OArea = 0;//始发地所属区code(不限或全国时传0)
  23.                 this.address1["OProvince"] = val[0].name;
  24.                 this.address1["OCity"] = \'全省\';
  25.                 this.address1["OArea"] = \'全市\';
  26.                 this.address1["OPCode"] = val[0].code;
  27.                 this.address1["OCCode"] = 0;
  28.                 this.address1["OACode"] = val[0].code;//这里必须有值，为了再次点开定位用
  29.                 this.screenval1 = val[0].name;
  30.             }else if(val[2].name == \'\' && val[2].code == \'\'){
  31.                 //选了省市，未选区的情况
  32.                 val[2].name = \'全市\';
  33.                 val[2].code = 0;
  34.                 this.OProvince = val[0].code;//始发地省份code(不限或全国时传0)
  35.                 this.OCity =  val[1].code;//始发地城市code(不限或全国时传0)
  36.                 this.OArea = 0;//始发地所属区code(不限或全国时传0)
  37.                 this.address1["OProvince"] = val[0].name;
  38.                 this.address1["OCity"] =  val[1].name;
  39.                 this.address1["OArea"] = \'全市\';
  40.                 this.address1["OPCode"] = val[0].code;
  41.                 this.address1["OCCode"] = val[1].code;
  42.                 this.address1["OACode"] = val[1].code;//这里必须有值，为了再次点开定位用
  43.                 this.screenval1 = val[1].name;
  44.             }else{
  45.                 //省市区都选了的情况
  46.                 this.OProvince = val[0].code;//始发地省份code(不限或全国时传0)
  47.                 this.OCity = val[1].code;//始发地城市code(不限或全国时传0)
  48.                 this.OArea = val[2].code;//始发地所属区code(不限或全国时传0)
  49.                 this.address1["OProvince"] = val[0].name;
  50.                 this.address1["OCity"] = val[1].name;
  51.                 this.address1["OArea"] = val[2].name;
  52.                 this.address1["OPCode"] = val[0].code;
  53.                 this.address1["OCCode"] = val[1].code;
  54.                 this.address1["OACode"] = val[2].code;//这里必须有值，为了再次点开定位用
  55.                 this.screenval1 = val[1].name + "-" + val[2].name;//始发地不显示省val[0].name + "-" +
  56.             }
  58.             this.getData(1,pageSize);
  59.             this.city_show1 = false;
  61.         },

 

版权声明：本文为liufeiran原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/liufeiran/archive/2004/01/13/13063916.html