小程序實現(xiàn)自定義多層級單選和多選

第小程序實現(xiàn)自定義多層級單選和多選本文實例為大家分享了小程序實現(xiàn)自定義多層級單選和多選的具體代碼，供大家參考，具體內容如下

效果：

ps：這兒是用自定義的下拉框，我把它封裝成了一個組件

wxml

view

view

view

van-fieldvalue="{{layout}}"data-key="layout"placeholder="請輸入"requiredicon="arrow"label="戶型"bind:tap="onChange"/

/view

/view

viewwx:if="{{show}}"

viewwx:for="{{layouts}}"wx:key="index"

viewclass="{{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="{{curI}}"

bind:tap="getOptionItem"

{{curI}}

/view

/view

/view

/view

wxss

.select-box{

width:100%;

padding:20rpx;

box-sizing:border-box;

.cell-border{

border-radius:6rpx;

border:1pxsolid#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:1pxsolid#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;

"component":true,

"usingComponents":{

"van-field":"../../vant/field/index",

}

js

ps:data是組件本身的數(shù)據(jù)，layouts是數(shù)據(jù)源

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衛(wèi)",key:0,},

{name:"2衛(wèi)",key:1,},

{name:"3衛(wèi)",key:2,},

{name:"4衛(wèi)",key:3,},

{name:"5衛(wèi)",key:4,},

{name:"6衛(wèi)",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)

constkey=event.currentTarget.dataset.key;

constcK=event.currentTarget.dataset.colkey;

const{curKey,colKey,layouts}=this.data;

this.setData({

curKey:key,

colKey:cK

//用checked字段判斷，允許每列之間單選,多行之間多選

layouts[cK].column.map