小程序实现自定义的多层级单选和多选（每列单选，每行多选）

效果：

ps：这儿是用自定义的下拉框，我把它封装成了一个组件

wxml

    
        
            
        
    
    
        
            
                {{curItem.name}}
            
        
    

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",
    }
  }

js

ps:data是组件本身的数据，layouts是数据源

Component({
    properties:{
        
    },
    data:{
        show:false,
        curKey:-1,
        colKey:-1,
        layouts:[
            {
                colKey:0,
                column:[
                    {name:"1室",key:0,},
                    {name:"2室",key:1,},
                    {name:"3室",key:2,},
                    {name:"4室",key:3,},
                    {name:"5室",key:4,},
                    {name:"6室",key:5,} ]
            },
            {
                colKey:1,
                column:[
                    {name:"1厅",key:0,},
                    {name:"2厅",key:1,},
                    {name:"3厅",key:2,},
                    {name:"4厅",key:3,},
                    {name:"5厅",key:4,},
                    {name:"6厅",key:5,} ]
            },
            {
                colKey:2,
                column:[
                {name:"1厨",key:0,},
                {name:"2厨",key:1,},
                {name:"3厨",key:2,},
                {name:"4厨",key:3,},
                {name:"5厨",key:4,},
                {name:"6厨",key:5,}]
            },
            {
                colKey:3,
                column:[
                {name:"1卫",key:0,},
                {name:"2卫",key:1,},
                {name:"3卫",key:2,},
                {name:"4卫",key:3,},
                {name:"5卫",key:4,},
                {name:"6卫",key:5,}
                ]
            },
            {
                colKey:4,
                column:[
                    {name:"1阳台",key:0,},
                    {name:"2阳台",key:1,},
                    {name:"3阳台",key:2,},
                    {name:"4阳台",key:3,},
                    {name:"5阳台",key:4,},
                    {name:"6阳台",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
            })
            //用checked字段判断，允许每列之间单选,多行之间多选
            layouts[cK].column.map(cur => {
                   return cur.checked = false;
            })
            layouts[cK].column[key].checked = true;
            this.setData({layouts})
        }
    }
})