ミニプログラムは、カスタムのマルチレベル単一選択と複数選択を実装します

<view class="select-box">
    <view class="select-title">
        <view class="cell-border">
            <van-field value="{{ layout }}" data-key="layout" placeholder="入力してください" required icon="arrow" label="ハウスタイプ" bind:tap="onChange" />
        </ビュー>
    </ビュー>
    <view class="select-list" wx:if="{{show}}">
        <view class="option" wx:for="{{layouts}}" wx:key="index">
            <view class="{{curItem.checked ? 'option-item-active' : 'option-item'}}" 
                wx:for="{{item.column}}" wx:key="インデックス" 
                wx:for-item="現在のアイテム" 
                データキー="{{curItem.key}}"
                データ-colkey="{{item.colKey}}"
                データ名="{{curItem.name}}" 
                バインド:tap="getOptionItem">
                {{curItem.name}}
            </ビュー>
        </ビュー>
    </ビュー>
</ビュー>

.選択ボックス{
    幅: 100%;
    パディング: 20rpx;
    ボックスのサイズ: 境界線ボックス;
}
 
.セル境界{
    境界線の半径: 6rpx;
    境界線: 1px 実線 #999;
    下部マージン: 10rpx;
}
.選択リスト{
    ディスプレイ: フレックス;
    flex-direction: 行;
    コンテンツの両端揃え: スペースを空ける;
    幅: 100%;
    高さ: 360rpx;
    パディング: 20rpx;
    ボックスのサイズ: 境界線ボックス;
    背景色: #fff;
    境界線: 1px 実線 #eee;
}
.選択リスト .オプション{
    ディスプレイ: フレックス;
    flex-direction: 列;
    フォントサイズ: 24rpx;
}
.オプション項目{
    幅: 80rpx;
    高さ: 100rpx;
    背景色: #eee;
    テキスト配置: 中央;
    上マージン: 5px;
    パディング: 2px;
 
}
 
.オプション項目アクティブ{
    幅: 80rpx;
    高さ: 100rpx;
    背景色: #FF6600;
    テキスト配置: 中央;
    上マージン: 5px;
    パディング: 2px;
    色:#fff;
}
json
{
    「コンポーネント」：true、
    "コンポーネントの使用": {
      "van-field": "../../vant/field/index",
    }
  }

成分（{
    プロパティ:
        
    },
    データ：{
        表示:false、
        現在のキー:-1、
        列キー:-1、
        レイアウト:[
            {
                列キー:0,
                カラム：[
                    {名前:"部屋1",キー:0,},
                    {名前:"部屋2",キー:1,},
                    {name:"部屋3",キー:2,},
                    {name:"部屋4",key:3,},
                    {name:"部屋5",key:4,},
                    {name:"部屋6",key:5,} ]
            },
            {
                列キー:1、
                カラム：[
                    {name:"ホール1",key:0,},
                    {name:"ホール2",key:1,},
                    {name:"ホール3",key:2,},
                    {name:"部屋4",key:3,},
                    {name:"ホール5",key:4,},
                    {name:"部屋6",key:5,} ]
            },
            {
                列キー:2,
                カラム：[
                {名前:"1 キッチン",キー:0,},
                {名前:"2 シェフ",キー:1,},
                {名前:"3 シェフ",キー:2,},
                {名前:"4 シェフ",キー:3,},
                {名前:"5 シェフ",キー:4,},
                {name:"6 シェフ",key:5,}]
            },
            {
                列キー:3,
                カラム：[
                {name:"1 ガード",key:0,},
                {name:"2 ガード",key:1,},
                {name:"3 ガード",key:2,},
                {name:"4 ガード",key:3,},
                {name:"5 ガード",key:4,},
                {name:"6 ガード",key:5,}
                ]
            },
            {
                列キー:4,
                カラム：[
                    {name:"1 バルコニー",key:0,},
                    {name:"2 バルコニー",key:1,},
                    {name:"3 バルコニー",key:2,},
                    {name:"4 バルコニー",key:3,},
                    {name:"5 バルコニー",key:4,},
                    {name:"6 バルコニー",key:5,}
                    ] 
            }
        ]
    },
    方法:{
        オンチェンジ(){
            const {show} = this.data;
            this.setData({
                表示:!表示 
            })
        },
        getOptionItem(イベント){
            console.log("イベント",イベント)
            定数キー = event.currentTarget.dataset.key;
            cK = event.currentTarget.dataset.colkey; 定数。
            const {curKey、colKey、layouts} = this.data;
            this.setData({
                curKey:キー、
                列キー:cK
            })
            // チェックされたフィールドを使用して、列間の単一選択と行間の複数選択を許可します layouts[cK].column.map(cur => {
                   cur.checked = false を返します。
            })
            レイアウト[cK].column[キー].checked = true;
            this.setData({レイアウト})
        }
    }
})