vue中使用vant-UI實現移動端自定義省市區三級聯動

最近項目中需要用到省市區聯動，ui用的是有贊的Vant-UI
看了一下文檔，UI中已經給我們提供了一個寫好的省市區聯動組件，如果沒有特殊需求的話可以直接使用：

但是這個組件的架構和項目中的需求有一些出入——項目中所需的行政區標識code使用的不是標准行政區六位代碼，是自定義的標識，需要從后台請求拿到。

以下是使用vant的Picker組件重寫省市區聯動的代碼：

點我查看Picker組件的API文檔

h5：

<van-popup v-model="cityVisable" position="bottom">        //Picker一般結合遮罩層使用
  <van-picker
          show-toolbar                                        //顯示上方取消和完成按鈕
          title="請選擇地區"                                //自定義標題欄內容
          value-key="name"                               //自定義Picker滾動條中顯示的文字（因為Picker中的每一項都是一個json）
          :columns="areaList"                            //Picker的數據
          @change="onAreaChange"                //當Picker選中項改變時觸發
          @cancel="onCancel"                          //當點擊取消按鈕時觸發
          @confirm="onAreaConfirm"                //當點擊完成按鈕時觸發
  />        
</van-popup>

js：

data() {
    return {    
        cityVisable: false,                                                     //遮罩層顯示或隱藏
        areaList: [{values: []}, {values: []}, {values: []}],        //自定義數據三級結構
        checkCity: ''                                                             //Picker拿到的值
    }
},
mounted: {
    this.getArea('',0);            //渲染頁面時請求第一層省級數據
},
methods: {
        //網絡請求地區數據(難點在如何拼裝三級結構)
        getArea(ParentId, index) {
            const options = {ParentId};
            this.$Api.GetQuotationAreeaByParentAreaId(options, res => {    //網絡請求封裝，post請求，參數是ParentId
                if (res.ret === '0') {                                                                    //當請求成功時
                    const {regionList} = res.data;
                    this.areaList[index].values = [
                        {name: '請選擇'},
                        ...regionList                                                                        //ES6新語法
                    ];

                    if (index < 2) {                                                                         //當請求的是三級內的內容時
                       this.areaList[index + 1].values = [];
                    }
                    this.areaList = [...this.areaList];                                            //更新areaList
                } else {
                    this.$notify(res.msg);
                }
           })
        }, 

        //當地區選擇變化時
        onAreaChange(picker, values, index) {
            if (index < 2) {
                this.getArea(values[index].code, index + 1);                        //傳參 參數為上層選擇的地區的code
            }
        },   

        //點擊取消
        onCancel() {
            this.cityVisable = false;
       },

        //點擊確定
        onAreaConfirm(value) {
            if (value[2] && value[2].code) {
                this.checkCity = value[2];
            } else if (value[1] && value[1].code) {
                this.checkCity = value[1];
            } else if (value[0] && value[0].code) {
                this.checkCity = value[0];
            } else {
                this.checkCity = null;
            }
            this.cityVisable = false;
        }
}

網絡請求返回的結構：
請求的參數：使用code字段的值就可以

{
  "ret": "0",
  "data": {
    "regionList": [
      {
        "name": "北京市",
        "code": "110000000000",
        "parentCode": "000000000000"
      },
      {
        "name": "天津市",
        "code": "120000000000",
        "parentCode": "000000000000"
      },
    ]
  },
  "msg":null
}

預覽圖：