關于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不知道為什麼始終不成功。