关于Vant里van-cell+van-popup+van-area组成级联选择地区的用法。

代码只涉及地区这一模块

代码简单却有效

完成效果：

初始页面

选择地区

显示地区

步骤：

第一步引入van-cell、van-popup、van-area 具体请百度。

第二步写html代码。

<van-cell
      v-model="value"
      @click="showPopup"
      title="地区"
      is-link
      value="请选择"
    >
    </van-cell>
    <van-popup
      v-model="show"
      position="bottom"
    >
      <van-area
        title="标题"
        :area-list="areaList"
        :columns-num="3"
        :columns-placeholder="['请选择', '请选择', '请选择']"
        @confirm="confirmBtn"
        @cancel="onCancel"
      />
    </van-popup>
           

第三步写js代码。

data() {
    return {
      show: false,
      value: '请选择',
      areaList: {
        province_list: {
          110000: '北京市',
          120000: '天津市',
        },
        city_list: {
          110100: '北京市',
          110200: '县',
          120100: '天津市',
          120200: '县',
        },
        county_list: {
          110101: '东城区',
          110102: '西城区',
          110105: '朝阳区',
          110106: '丰台区',
          120101: '和平区',
          120102: '河东区',
          120103: '河西区',
          120104: '南开区',
          120105: '河北区',
        },
      },
    }
  },
  methods: {
    showPopup() {
      this.show = true
    },
    confirmBtn(val) {
      this.value=(val[0].name+"-"+val[1].name+"-"+val[2].name)
      this.show = false
    },
    onCancel() {
      this.show = false
    },
           

这里的地区数据是自己写的

试了一下引入areaList.js不知道为什么始终不成功。