Mini Program implements custom multi-level single-select and multiple-select

This article shares the specific code for implementing custom multi-level single-select and multi-select functions in a mini program for your reference. The specific content is as follows

Effect:

ps: Here is a custom drop-down box, which I encapsulated into a component

wxml

<view class="select-box">
    <view class="select-title">
        <view class="cell-border">
            <van-field value="{{ layout }}" data-key="layout" placeholder="Please enter" required icon="arrow" label="House type" bind:tap="onChange" />
        </view>
    </view>
    <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="index" 
                wx:for-item="curItem" 
                data-key="{{curItem.key}}"
                data-colkey="{{item.colKey}}"
                data-name="{{curItem.name}}" 
                bind:tap="getOptionItem">
                {{curItem.name}}
            </view>
        </view>
    </view>
</view>

wxss

.select-box{
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
}
 
.cell-border {
    border-radius: 6rpx;
    border: 1px solid #999;
    margin-bottom: 10rpx;
}
.select-list{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    height: 360rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #eee;
}
.select-list .option{
    display: flex;
    flex-direction: column;
    font-size: 24rpx;
}
.option-item{
    width: 80rpx;
    height: 100rpx;
    background-color: #eee;
    text-align: center;
    margin-top: 5px;
    padding: 2px;
 
}
 
.option-item-active{
    width: 80rpx;
    height: 100rpx;
    background-color: #FF6600;
    text-align: center;
    margin-top: 5px;
    padding: 2px;
    color:#fff;
}
json
{
    "component": true,
    "usingComponents": {
      "van-field": "../../vant/field/index",
    }
  }

ps:data is the data of the component itself, layouts is the data source

Component({
    properties:
        
    },
    data:{
        show:false,
        curKey:-1,
        colKey:-1,
        layouts:[
            {
                colKey:0,
                column:[
                    {name:"Room 1",key:0,},
                    {name:"Room 2",key:1,},
                    {name:"Room 3",key:2,},
                    {name:"Room 4",key:3,},
                    {name:"Room 5",key:4,},
                    {name:"Room 6",key:5,} ]
            },
            {
                colKey:1,
                column:[
                    {name:"Hall 1",key:0,},
                    {name:"Hall 2",key:1,},
                    {name:"Hall 3",key:2,},
                    {name:"Room 4",key:3,},
                    {name:"Hall 5",key:4,},
                    {name:"Room 6",key:5,} ]
            },
            {
                colKey:2,
                column:[
                {name:"1 kitchen",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,
                column:[
                {name:"1 Guard",key:0,},
                {name:"2 Guard",key:1,},
                {name:"3 Guard",key:2,},
                {name:"4 Guard",key:3,},
                {name:"5 Guard",key:4,},
                {name:"6 Guard",key:5,}
                ]
            },
            {
                colKey:4,
                column:[
                    {name:"1 balcony",key:0,},
                    {name:"2 balcony",key:1,},
                    {name:"3 balcony",key:2,},
                    {name:"4 balcony",key:3,},
                    {name:"5 balcony",key:4,},
                    {name:"6 balcony",key:5,}
                    ] 
            }
        ]
    },
    methods:{
        onChange(){
            const {show} = this.data;
            this.setData({
                show:!show 
            })
        },
        getOptionItem(event){
            console.log("event",event)
            const key = event.currentTarget.dataset.key;
            const cK = event.currentTarget.dataset.colkey;
            const {curKey,colKey,layouts} = this.data;
            this.setData({
                curKey:key,
                colKey:cK
            })
            //Use the checked field to allow single selection between columns and multiple selection between rows layouts[cK].column.map(cur => {
                   return cur.checked = false;
            })
            layouts[cK].column[key].checked = true;
            this.setData({layouts})
        }
    }
})

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

WeChat applet radio button custom assignment
How to implement radio checkbox check and cancel in WeChat applet
WeChat applet single-select radio and multi-select checkbox button usage examples
WeChat applet realizes the effect of switching between single-select tabs
Mini Program implements single-select and multiple-select functions
WeChat applet implements single-select function
WeChat applet uses radio to display single option function [with source code download]
WeChat applet radio checkbox component detailed explanation and example code

<<: Detailed explanation of the Chinese garbled characters problem in MySQL database

>>: Solution to the problem that the virtual machine Ubuntu 16.04 cannot connect to the Internet