当前位置: 首页>前端>正文

记录uni-app picker-view获取二级联动的数据(同小程序)

其中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数据结构


记录uni-app picker-view获取二级联动的数据(同小程序),第1张
565387d5ec144d2aa80bb6369a059647.png

https://www.xamrdz.com/web/2tf1997541.html

相关文章: