官網地址：連結

官網文件可能不是很完善，但仔細看文件，方法，型別其實都講到的。

度娘也沒有找到，花了大半天爬坑試錯。

搭配彈出層使用

<van-field readonly clickable placeholder="選擇城市" :value="station" @click="showPicker = true" />

<van-popup v-model="showPicker" position="bottom">
<van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" @change="onChange" />
</van-popup>

const citys = [ // 我們習慣的格式。 可以後臺給你出，如果你打不過的話，你就。。。
 {
  text: "測試一",// 預設識別text標籤
  id: 1,children: [
   {
    id: 11,text: "測試1-1",children: [
     {
      id: 111,text: "測試1-1-1"
     },{
      id: 112,text: "測試1-1-2"
     }
    ]
   },{
    id: 12,text: "測試1-2",children: [
     {
      id: 122,text: "測試1-2-1"
     },{
      id: 122,text: "測試1-2-2"
     }
    ]
   },{
    id: 13,text: "測試1-3"
   }
  ]
 },{
  text: "測試二",id: 2,children: [
   {
    id: 21,text: "測試2",children: [
     {
      id: 221,text: "測試2-2-1"
     },{
      id: 222,text: "測試2-2-2"
     }
    ]
   },{
    id: 22,text: "測試2"
   },{
    id: 23,text: "測試2"
   }
  ]
 },{
  text: "測試三",id: 3,children: [
   {
    id: 31,text: "測試3",children: [
     {
      id: 311,text: "測試3-1-1"
     },{
      id: 312,text: "測試3-3-2"
     }
    ]
   },{
    id: 32,text: "測試3"
   },{
    id: 33,text: "測試3"
   }
  ]
 }
];

 data(){
  return {
   station: "",showPicker: false,columns: [
    {
     values: citys,// 設定的頁面初始值
     className: "column1"
    },{
     values: citys[0].children,className: "column2"
    },{
     values: citys[0].children[0].children,className: "column3"
    }
   ],} 
 }; 

  onConfirm(value) {
   const compact = arr => arr.filter(Boolean); // 三級聯動 去除沒值的，比如只有兩級
   const result = compact(value);
   let str = ""; // 呈現頁面顯示 /xxx/xxx/xxx
   result.forEach(item => {
    str += "/" + item.text;
   });
   this.station = str;
   this.showPicker = false;
   
  const end = result[result.length - 1]; // 一般都是取最後一個id給後臺的
   const id = end.id;
   console.log(id);
  },onChange(picker,values,index) { // 實在不行自己列印測試
   if (index == 0) {
    picker.setColumnValues(2,[]); // 防止突然選中第一個，第二個是更新的，但第三個聯級不更新，我暫時強制清空
   }
   let ColumnIndex = picker.getColumnIndex(index);
   console.log("第" + index + "列","第" + ColumnIndex + "個");
   picker.setColumnValues(index + 1,values[ColumnIndex ].children || []);//點當前列更新下一列資料，防止undefined 
   
 // 當然，如果後臺資料不給你想要的格式，你就按需請求一次了，比如選中第一個，取id請求介面，更新下一列。畢竟連動內容多的話，頁面請求也多。但頁面就不流暢，比如第一列第二列初始值。 
  // 我就是打不過後臺。。。
  }

補充知識：【vant】配合 van-popup 使用 van-picker 多級聯動，回顯賦預設值 遇到的坑及解決方案

先吐槽一句，van-picker 真心不怎麼好用。。。

頁面大概是這個樣子：

程式碼結構大概是這個樣子：

<!-- 選擇 收支型別彈窗 -->
<van-popup ref = "accountTypePopup" v-model="showPicker" position="bottom">
  <van-picker
    ref = "accountTypePopup2"
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
    @change="onChange"
    
  />
</van-popup>
methods: {
  // ...
  // 修改 columns 方法
  changeColumns(p_name,name) {
    // p_name 一級分類回顯值
    // name 二級分類回顯值
    
    // 型別列表
    var typeList =
      this.tabActive === 0
        ? this.expendTypeList
        : this.incomeTypeList;
 
    // 設定 收支型別選項 columns 的預設值 和 子選項
    this.columns[0]["defaultIndex"] = this.columns[0][
      "values"
    ].findIndex(item => item === p_name);
 
    this.columns[1]["values"] = typeList[p_name];
 
    this.columns[1]["defaultIndex"] = this.columns[1][
      "values"
    ].findIndex(item => item === name);
  }
}

期望是：popup彈出後，picker選中使用者已經選中的選項

結果是：僅第一次popup彈出後，picker選中使用者已經選中的選項，之後的彈出一直展示第一次的列表

檢視文件，解決方案是用van-picker的方法：

坑就坑中，元件巢狀（popup套picker），用ref獲取不到 picker 例項

咋整？

用除錯工具除錯了半天發現，picker例項化成DOM元素後，即使隱藏，也僅僅是display:none，不會重新例項化

那就好辦了。。。

<!-- 選擇 收支型別彈窗 -->
<van-popup ref = "accountTypePopup" v-model="showPicker" position="bottom">
  <van-picker
    ref = "accountTypePopup2"
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
    @change="onChange"
 
    // 這裡是新加的 //
    :key = "account_type_value"
    
  />
</van-popup>

新增一個key屬性，值為【一級項+二級項】，問題圓滿解決！！！

以上這篇Vant picker 多級聯動操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。