WeChat-Applet-Picker - Mehrspalten-Selektor (Modus = MultiSelector)

{
  "Seiten": [
    "Seiten/Index/Index",
    "Seiten/Protokolle/Protokolle",
    "Seiten/Auswahl/Auswahl"
  ],
  "entryPagePath": "Seiten/Auswahl/Auswahl",
  "Fenster": {
    "backgroundTextStyle": "hell",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "schwarz"
  },
  "sitemapLocation": "sitemap.json",
  "Komponenten verwenden": {
    "van-button": "@vant/weapp/button/index",
    "van-Bereich": ​​"@vant/weapp/Bereich/index"
  }
}

<!--pages/picker/picker.wxml-->
<Ansicht>
  <view class="section__title">Mehrspaltenselektor</view>
  <picker mode="MultiSelector" bindchange="BindeMultiPickerChange" bindcolumnchange="BindeMultiPickerColumnChange"
    Wert="{{multiIndex}}" Bereich="{{newArr}}">
    <Klasse anzeigen="picker">
      Aktuelle Auswahl: <van-button type="primary">
        {{newArr[0][multiIndex[0]]}}, {{newArr[1][multiIndex[1]]}}, {{newArr[2][multiIndex[2]]}}</van-button>
    </Ansicht>
  </picker>
</Ansicht>

// Seiten/Picker/Picker.js
Seite({
  /**
   * Ausgangsdaten der Seite */
  Daten: {
    MultiArray: [{
        ID: 1,
        Bezeichnung: "Südosten",
        Kinder: [{
            ID: 2,
            Etikett: "Shanghai",
            Kinder: [{
                ID: 3,
                Bezeichnung: "Putuo",
              },
              {
                ID: 4,
                Etikett: "Huangpu",
              },
              {
                ID: 5,
                Beschriftung: "Xuhui",
              },
            ],
          },
          {
            Ich würde: 7,
            Etikett: "Jiangsu",
            Kinder: [{
                ID: 8,
                Etikett: "Nanjing",
              },
              {
                ID: 9,
                Etikett: "Suzhou",
              },
              {
                ID: 10,
                Bezeichnung: "Wuxi",
              },
            ],
          },
          {
            Ich würde: 12,
            Etikett: "Zhejiang",
            Kinder: [{
                Ich würde: 13,
                Etikett: "Hangzhou",
              },
              {
                Ich würde: 14,
                Etikett: "Ningbo",
              },
              {
                Ich würde: 15,
                Bezeichnung: "Jiaxing",
              },
            ],
          },
        ],
      },
      {
        Ich würde: 17,
        Bezeichnung: "Nordwesten",
        Kinder: [{
            Ich würde: 18,
            Bezeichnung: "Shaanxi",
            Kinder: [{
                Ich würde: 19,
                Beschriftung: "Xi'an",
              },
              {
                Ich würde: 20,
                Bezeichnung: "Yan'an",
              },
            ],
          },
          {
            Ich würde: 21,
            Beschriftung: „Autonome Region Xinjiang der Uiguren“,
            Kinder: [{
                Ich würde: 22,
                Beschriftung: "Urumqi",
              },
              {
                Ich würde: 23,
                Bezeichnung: "Karamay",
              },
            ],
          },
        ],
      },
    ],
    multiIndex: [0, 0, 0],
    mehrere IDs: [],
    neuerArr: [],
  },

  bindMultiPickerChange(e) {
    Konsole.log(diese.Daten.multiIds);
  },
  bindMultiPickerColumnChange(e) {
    lass Daten = {
      newArr: diese.Daten.newArr,
      multiIndex: diese.Daten.multiIndex,
      multiIds: diese.Daten.multiIds,
    };
    Daten.multiIndex[e.detail.Spalte] = e.detail.Wert;

    let Suchspalte = () => {
      sei arr1 = [];
      sei arr2 = [];
      diese.Daten.multiArray.map((v, vk) => {
        wenn (data.multiIndex[0] === vk) {
          Daten.multiIds[0] = {
            ...v,
          };
          v.children.map((c, ck) => {
            arr1.push(c.label);
            wenn (data.multiIndex[1] === ck) {
              Daten.multiIds[1] = {
                ...C,
              };
              c.children.map((t, vt) => {
                arr2.push(t.label);
                wenn (data.multiIndex[2] === vt) {
                  Daten.multiIds[2] = {
                    ...T,
                  };
                }
              });
            }
          });
        }
      });
      data.newArr[1] = arr1;
      data.newArr[2] = arr2;
    };
    Schalter (e.detail.spalte) {
      Fall 0:
        // Bei jedem Wechsel den Anfangswert wiederherstellen data.multiIndex[1] = 0;
        Daten.multiIndex[2] = 0;
        //Funktionsverarbeitung ausführen searchColumn();
        brechen;
      Fall 1:
        Daten.multiIndex[2] = 0;
        Suchspalte();
        brechen;
    }
    dies.setData(Daten);
  },

  /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/
  onLoad: Funktion (Optionen) {
    lass Zustand = {
      arr: [],
      arr1: [],
      arr2: [],
      arr3: [],
      mehrere IDs: []
    }
    diese.Daten.multiArray.map((v, vk) => {
      Zustand.arr1.push(v.label);
      wenn (diese.Daten.multiIndex[0] === vk) {
        Zustand.multiIds[0] = v;
      }
      wenn (Zustand.arr2.Länge <= 0) {
        v.children.map((c, ck) => {
          Zustand.arr2.push(c.label);
          wenn (this.data.multiIndex[1] === ck) {
            Zustand.multiIds[1] = c;
          }
          wenn (state.arr3.length <= 0) {
            c.children.map((t, tk) => {
              Zustand.arr3.push(t.label);
              wenn (diese.data.multiIndex[2] === tk) {
                Zustand.multiIds[2] = t;
              }
            });
          }
        });
      }
    });
    Zustand.arr[0] = Zustand.arr1;
    Zustand.arr[1] = Zustand.arr2;
    Zustand.arr[2] = Zustand.arr3;
    dies.setData({
      newArr: status.arr,
      multiIds: Status.multiIds,
    });
  },

  /**
   * Lebenszyklusfunktion - wartet auf den Abschluss der ersten Darstellung der Seite*/
  onReady: Funktion () {},

  /**
   * Lebenszyklusfunktion - Seitenanzeige überwachen*/
  onShow: Funktion () {},

  /**
   * Lebenszyklusfunktion - Achten Sie auf das Ausblenden von Seiten */
  onHide: Funktion () {},

  /**
   * Lebenszyklusfunktion - Deinstallation der Seite überwachen*/
  beim Entladen: Funktion () {},

  /**
   * Seitenbezogene Ereignisverarbeitungsfunktion - Achten Sie auf die Pulldown-Aktion des Benutzers */
  onPullDownRefresh: Funktion () {},

  /**
   * Die Funktion, die das Bottoming-Ereignis auf der Seite behandelt*/
  onReachBottom: Funktion () {},

  /**
   * Der Benutzer klickt auf die obere rechte Ecke, um zu teilen*/
  onShareAppMessage: Funktion () {},
});