小程序级联选择（接口请求后展示picker

实现效果

级联选择，下级选项与上级的选择有关，且每次都要重新调用接口获取选项

<template>
  <view class="wrapper-region-tree">
    <view wx:for="{{regionList}}" wx:key="index" class="region-item">
       <viewstyle="white-space: nowrap">{{ item.title }}</view>
       <text style="color: red">*</text>
       <view class="choose-wrap" @tap="clickRegion({{index}})">
         <view wx:if="{{ item.value }}">{{ item.value.name }}</view>
         <view wx:else style="color: #929292">请选择</view>
         <image class="img-type-more" src="../resources/icon_right.png" />
       </view>
    </view>
    <picker-view indicator-class='pickerCol' bindchange="bindChange" class="{{ isShowPicker ? 'show' : '' }}" wx:if="{{ isShowPicker }}">
      <view class='btns'>
        <view bindtap="closePicker">取消</view>
        <view bindtap="getValue">确认</view>
      </view>
      <picker-view-column>
        <view wx:for="{{chooseColumns}}" wx:key="index" class="{{ pickerIndex === index ? 'pick-text' : '' }}">{{item.name}}</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

样式

<style scoped lang="less">
  .wrapper-region-tree {
    background: white;
    padding: 24rpx 34rpx;

    .region-item {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      line-height: 80rpx;
    }
  }

  .choose-wrap {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: center
  }
  .img-type-more {
    margin-left: 8rpx;
    width: 16rpx;
    height: 24rpx;
  }

  // 设置头部的取消和确定按钮
  picker-view .btns {
    width: 100%;
    height: 100rpx;
    color: #3388ff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
  }

  picker-view .btns view {
    width: 20%;
    text-align: center;
    font-size: 32rpx;
  }

  picker-view {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #FFF;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    height: 0;
    border-radius: 30rpx 30rpx 0 0;
    z-index: 999;
  }

  // 添加弹出的过渡动画
  picker-view.show {
    height: 36%;
    transition: all 0.4s;
  }

  // 设置单列数据的样式
  picker-view-column {
    border-radius: 30rpx 30rpx 0 0;
    color: #B8B8B8;
    font-size: 32rpx;
    margin-top: 47rpx;
  }

  // 设置选中框的样式
  .pickerCol {
    width: 100%;
    height: 50rpx;
    color: #3388ff;
    border-top: 1px solid #f2f3f5;
    border-bottom: 1px solid #f2f3f5;
  }

  // 自定义选中的时候字体颜色和大小
  .pick-text {
    color: #3388ff;
    font-size: 34rpx;
  }
</style>

data = {
    isShowPicker: false,
    pickerIndex: 0,
    regionList: [ // 接口请求对于各级有什么需要都可以写在这里，方便取，此需求只需要下标所以没加
      {},  // 占位，保证下标index为接口传参regionLevel
      {
        title: '所属省份',
        value: null
      },
      {
        title: '所属地市',
        value: null
      },
      {
        title: '所属区县',
        value: null
      },
    ],
    selectIndex: -1, // 上一次级联选择index，避免重复请求
    chooseColumns: [],
  }
  methods = {
    clickRegion(curRegionLevel = 1) {
      if (curRegionLevel === this.selectIndex) {
      	// 不用重复请求
        this.isShowPicker = true;
        return;
      }
      let seniorID = -1; // 上级区划选择的id值
      if (this.regionLevel < curRegionLevel) {
      	// 判断上级区划是否已选择
        seniorID = this.regionList[curRegionLevel - 1].value && this.regionList[curRegionLevel - 1].value.id
        if (!seniorID && seniorID !== 0) {
          toast('请先选择上级区划！')
          return;
        }
      }
      // 后端说根据上级选择过滤则传seniorID，取此级所有选项则传regionType
      const params = this.regionLevel < curRegionLevel ? { seniorID: seniorID } : { regionType: curRegionLevel };
      Http.ajax({
        methodName: '/mi/region/getregionlist',
        params,
        start: () => {
          openLoading()
        },
        success: data => {
          if (data && data.success) {
            this.chooseColumns = (data.data || []).map(val => {
              return { // 后续需要的值
                name: val.regionName,
                id: val.regionID,
              };
            });
            this.selectIndex = curRegionLevel;
            this.isShowPicker = true;
            this.$apply()
          } else {
            toast('获取数据失败')
          }
        },
        fail: (res) => {
          toast('接口调用失败')
        },
        complete: () => {
          closeLoading()
        }
      })
    },
    bindChange(e) {
      this.pickerIndex = e.detail.value[0];
    },
    closePicker() {
      this.pickerIndex = 0;
      this.isShowPicker = false;
    },
    getValue() {
      const curItem = this.chooseColumns[this.pickerIndex];
      this.regionList.forEach((item, index) => {
        if (index === this.selectIndex) {
          item.value = curItem;
        } else if (index > this.selectIndex) {
          item.value = null; // 级联选择，需要清空下级选择
        }
      });
      this.pickerIndex = 0;
      this.isShowPicker = false;
      // 在此处保存值
    },
  }