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

희망: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 속성 을 추가,값 은【1 레벨 항목+2 레벨 항목】,문제 가 원만 하 게 해결 되 었 습 니 다!!!
이상 의 이 Vant picker 다단 계 연동 작업 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.