Mini-Programm implementiert benutzerdefinierte mehrstufige Einzelauswahl und Mehrfachauswahl

<Klasse anzeigen="Auswahlfeld">
    <Ansichtsklasse="Titel auswählen">
        <Ansichtsklasse="Zellenrand">
            <van-field value="{{ layout }}" data-key="layout" placeholder="Bitte eingeben" required icon="arrow" label="Haustyp" bind:tap="onChange" />
        </Ansicht>
    </Ansicht>
    <Ansichtsklasse="Auswahlliste" wx:if="{{anzeigen}}">
        <Ansichtsklasse="Option" wx:für="{{layouts}}" wx:Schlüssel="index">
            <Ansichtsklasse="{{curItem.checked ? 'option-item-active' : 'option-item'}}" 
                wx:für="{{item.column}}" wx:key="index" 
                wx:for-item="aktuellesItem" 
                Datenschlüssel="{{curItem.key}}"
                Daten-colkey="{{item.colKey}}"
                Datenname = "{{curItem.name}}" 
                binden:tap="getOptionItem">
                {{curItem.name}}
            </Ansicht>
        </Ansicht>
    </Ansicht>
</Ansicht>

.Auswahlfeld{
    Breite: 100 %;
    Polsterung: 20rpx;
    Box-Größe: Rahmenbox;
}
 
.Zellenrand {
    Rahmenradius: 6rpx;
    Rand: 1px durchgezogen #999;
    Rand unten: 10rpx;
}
.Auswahlliste{
    Anzeige: Flex;
    Flex-Richtung: Reihe;
    Inhalt ausrichten: Abstand herum;
    Breite: 100 %;
    Höhe: 360rpx;
    Polsterung: 20rpx;
    Box-Größe: Rahmenbox;
    Hintergrundfarbe: #fff;
    Rand: 1px durchgezogen #eee;
}
.Auswahlliste .Option{
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Schriftgröße: 24rpx;
}
.option-item{
    Breite: 80rpx;
    Höhe: 100rpx;
    Hintergrundfarbe: #eee;
    Textausrichtung: zentriert;
    Rand oben: 5px;
    Polsterung: 2px;
 
}
 
.option-item-active{
    Breite: 80rpx;
    Höhe: 100rpx;
    Hintergrundfarbe: #FF6600;
    Textausrichtung: zentriert;
    Rand oben: 5px;
    Polsterung: 2px;
    Farbe: #fff;
}
json
{
    "Komponente": wahr,
    "Komponenten verwenden": {
      "van-field": "../../vant/Feld/Index",
    }
  }

Komponente({
    Eigenschaften:
        
    },
    Daten:{
        anzeigen:false,
        aktuellerSchlüssel:-1,
        Spaltenschlüssel: -1,
        Layouts:[
            {
                Spaltenschlüssel:0,
                Spalte:[
                    {name:"Raum 1",key:0,},
                    {name:"Raum 2",key:1,},
                    {name:"Raum 3",key:2,},
                    {name:"Raum 4",key:3,},
                    {name:"Raum 5",key:4,},
                    {name:"Raum 6",key:5,} ]
            },
            {
                colKey:1,
                Spalte:[
                    {name:"Halle 1",key:0,},
                    {name:"Halle 2",key:1,},
                    {name:"Halle 3",key:2,},
                    {name:"Raum 4",key:3,},
                    {name:"Halle 5",key:4,},
                    {name:"Raum 6",key:5,} ]
            },
            {
                colKey:2,
                Spalte:[
                {name:"1 Küche",key:0,},
                {name:"2 Chef",key:1,},
                {name:"3 chef",key:2,},
                {name:"4 chef",key:3,},
                {name:"5 chef",key:4,},
                {name:"6 Chef",key:5,}]
            },
            {
                colKey:3,
                Spalte:[
                {name:"1 Wache",Schlüssel:0,},
                {name:"2 Wache",Schlüssel:1,},
                {name:"3. Wache",Schlüssel:2,},
                {name:"4 Wache",Schlüssel:3,},
                {name:"5 Wache",Schlüssel:4,},
                {name:"6 Wache",Schlüssel:5,}
                ]
            },
            {
                colKey:4,
                Spalte:[
                    {name:"1 Balkon",key:0,},
                    {name:"2 Balkon",key:1,},
                    {name:"3 Balkon",key:2,},
                    {name:"4 Balkon",key:3,},
                    {name:"5 Balkon",key:4,},
                    {name:"6 Balkon",key:5,}
                    ] 
            }
        ]
    },
    Methoden:{
        beiÄnderung(){
            const {show} = diese.Daten;
            dies.setData({
                anzeigen:!anzeigen 
            })
        },
        getOptionItem(Ereignis){
            console.log("Ereignis",Ereignis)
            const key = event.currentTarget.dataset.key;
            const cK = event.currentTarget.dataset.colkey;
            const {curKey,colKey,layouts} = diese.Daten;
            dies.setData({
                aktuellerSchlüssel:Schlüssel,
                colKey:cK
            })
            //Verwenden Sie das aktivierte Feld, um eine Einzelauswahl zwischen Spalten und eine Mehrfachauswahl zwischen Zeilen zu ermöglichen layouts[cK].column.map(cur => {
                   gibt cur.checked = false zurück;
            })
            layouts[cK].column[key].checked = true;
            dies.setData({layouts})
        }
    }
})