其中u-popup是u-view的ui组件
<u-popup v-model="showAlarmType" mode="bottom">
<picker-view class="picker-view" :value="region" @change="bindChange">
<view class="confirmBtn">
<view @click="cancel">取消</view>
<view @click="confirm">确认</view>
</view>
<picker-view-column>
<view class="item" v-for="(item,index) in alarmTypeList" :key="index">{{ item.commName }}</view>
</picker-view-column>
<picker-view-column v-if="alarmTypeList[region[0]]">
<view class="item" v-for="(sub,index) in alarmTypeList[region[0]].children" :key="index">{{ sub.commName }}</view>
</picker-view-column>
</picker-view>
</u-popup>
data部分(如何获取联动的二级数据)
data(){
return {
region:[0,0],
showAlarmType:false,
alarmTypeList:null
}
},
methods:{
bindChange(e){
const val = e.detail.value
if(this.region[0] !== val[0]) {
// 如果滑动的是第一列数据,让二三列恢复到0
this.region = [val[0], 0]
}
}
}
附加:
alarmTypeList数据结构