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

￡神魔★判官ぃ 2023-06-23 13:14 105阅读 0赞

# **效果：** #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70][]

# **wxml** #

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

# 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})
            }
        }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191219115421536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw==,size_16,color_FFFFFF,t_70