快捷導(dǎo)航

使用vant的地域控件追加全部選項(xiàng)

更新時(shí)間：2020年11月03日 09:52:02 作者：剛剛睡醒

這篇文章主要介紹了使用vant的地域控件追加全部選項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在項(xiàng)目中使用了vant的Area插件，需要進(jìn)行全部匹配，vant本身沒(méi)有實(shí)現(xiàn)，需要改造代碼，方法如下：

<div class="site">
 <span class>起點(diǎn)</span>
 <van-cell v-model="start" @click="areaSelect(0)"></van-cell>
</div>
<div class="site">
 <span>終點(diǎn)</span>
 <van-cell v-model="end" @click="areaSelect(1)"></van-cell>
</div>
<van-popup v-model="show" position="bottom">
 <van-area :area-list="areaList" @cancel="onCancel" @confirm="onConfirm" @change="change" ref="area" />
</van-popup>

vue的methos中添加下面兩個(gè)方法：

change(picker, value, index){
  if(value[0].code != 100000){

  if(index == 0){
   let addr = this.areaList;
   let areaListCode = value[0].code;
   let code1 = Object.assign({},addr.city_list,{[areaListCode]:"全部"});
   let code2 = Object.assign({},addr.county_list,{[areaListCode]:"全部"});
   this.areaList.city_list = code1;
   this.areaList.county_list = code2;
  }
  if (index == 1) {
   let addr = this.areaList;
   let areaListCode = value[1].code;
   let code = Object.assign({},addr.county_list,{[areaListCode]: "全部"});
   this.areaList.county_list = code;
  }
  }
 },
 areaSelect(type) {
  let addr = this.areaList;
  this.PickerType = type;
  this.show = true;  
  if(this.PickerType == 1 && this.endAddrInfo == "請(qǐng)選擇"){
   this.$refs.area.reset();
  };
  let province_list = Object.assign({},addr.province_list,{100000:"全部"});
  let city_list = Object.assign({},addr.city_list,{100100:"全部"});
  let county_list = Object.assign({},addr.county_list ,{100101:"全部"});
  this.areaList={
  province_list,city_list,county_list
  };
 },

補(bǔ)充知識(shí)：使用vant中的Area 省市區(qū)選擇和Area控件如果沒(méi)有選中第三級(jí)的話就選不到當(dāng)前值

今天要使用Area選擇器在網(wǎng)上查了很多方法一直都無(wú)法讓他隱藏再?gòu)棾鰜?lái)今天我就寫下我的心得

效果圖如下: