小程序实现自定义多层级单选和多选（筛选）

index.wxml

<duoxuanform6></duoxuanform6>

index.json

{
  "usingComponents": {
    "duoxuanform6": "/components/duoxuanform6/index"
  }
}

组件components：

/components/duoxuanform6/index.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>

/components/duoxuanform6/index.js

Component({
  properties:{
      
  },
  data:{
      show:true,
      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})
      }
  }
})

/components/duoxuanform6/index.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;
}

/components/duoxuanform6/index.json

{
  "component": true,
  "usingComponents": {}
}

来源：https://www.jb51.net/article/210233.htm