VANt picker多段連動操作

公式サイトのアドレス：リンク
公式文書は完璧ではないかもしれませんが、文書をよく見て、方法、種類は全部話します。
娘も見つけられませんでした。長い時間をかけて登ってみました。
ポップアップレイヤーと合わせて使う

<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);
  }
}

期待は：ポップアップ後、pickerはユーザーが選択したオプションを選択します。
その結果、最初のポップアップの後、ユーザが選択したオプションをpickerが選択し、その後のポップアップは初めてのリストをずっと表示しています。
文書を見ると、ソリューションはvan-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>

キー属性を追加します。値は「一級＋二級項目」です。問題は円満に解決します。
以上のVant picker多段連動操作は小編が皆さんに提供した内容を全部共有しています。参考にしていただければと思います。よろしくお願いします。