vue vant van-area实现地区联动省市区三级选择

实现效果：

vant文档：

注意事项： @vant/area-data Vant 官方提供了一份默认的省市区数据，可以通过 引入： npm install @vant/area-data //或者 yarn add @vant/area-data import { areaList } from @vant/area-data; export default { data() { return { areaList }; }, };

areaList 数据要先安装再使用

HTML结构：

<van-cell-group inset>
        <van-field v-model="areaValue" label="所在地区" readonly placeholder="选择省、市、区" @click.native="handleArea">
          <template #extra >
            <img src="../../assets/img/bottom.png" class="zsImg">
          </template>
        </van-field>
</van-cell-group>

配合弹窗popup组件

<!-- 所在地区弹窗 -->
    <van-popup v-model="isShowArea" position="bottom" round class="area-content" :overlay="true" :close-on-click-overlay="true">
      <van-area title="所在地区" :area-list="areaList" :columns-placeholder="[请选择, 请选择, 请选择]" @confirm="areaConfirm" @cancel="areaCancel"/>
</van-popup>

js：

isShowArea:false,
areaList,
areaValue:"",

点击坐在地区调用弹窗：

handleArea(){
      this.isShowArea = true;
},

点击地区弹窗确认按钮操作数据处理：

areaConfirm(data){
      let province = data[0];
      let city = data[1];
      let area = data[2];
      if(province.name){
        console.log(province,"省");
      }else{
        this.$toast("请选择省");
        return;
      }

      if(city.name){
        console.log(city,"市");
      }else{
        this.$toast("请选择市");
        return;
      }
      if(area.name){
        console.log(province,"区");
      }else{
        this.$toast("请选择区");
        return;
      }

      this.areaValue = province.name+city.name+area.name;
      this.isShowArea = false;
},

取消按钮操作处理：

areaCancel(){
      this.isShowArea = false;
},

👉👉👉 欢迎来访的博客，如有疑问可以留言、评论，看到后会及时回复。