uView 2.X 的 picker 组件实现省市区县联动选择功能

<template>
  <view class="container">
    <view class="p-card">
      <view class="p-title">
        <text>收货地址信息</text>
      </view>
      <view class="" style="margin-top: 22rpx;">
        <view
          class="u-flex u-flex-between"
          style="padding: 26rpx 0;border-bottom: 2rpx solid #ECECEC;"
        >
          <view class="">
            <text style="font-size: 30rpx;font-weight: 400;color: #424242;"
              >地区</text
            >
          </view>
          <view
            class="u-flex u-flex-between"
            style="width: 75%;"
            @click="handAddrClick"
          >
            <view class="" style="width: 90%;">
              <u--input
                placeholder="请选择省市区县"
                border="none"
                readonly
                v-model="pcaAddr"
              ></u--input>
              <u-picker
                :show="addrPickerShow"
                ref="uPicker"
                :columns="addrList"
                keyName="text"
                @confirm="confirm"
                @cancel="cancel"
                @change="changeHandler"
              ></u-picker>
            </view>
            <u-icon name="arrow-right" size="15"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        pcaAddr: "",
        treeList: [
          {
            text: "北京市",
            value: "110000",
            children: [
              {
                text: "北京市",
                value: "110100",
                children: [
                  {
                    text: "东城区",
                    value: "110101",
                  },
                  {
                    text: "西城区",
                    value: "110102",
                  },
                ],
              },
            ],
          },
          {
            text: "陕西省",
            value: "610000",
            children: [
              {
                text: "西安市",
                value: "610100",
                children: [
                  {
                    text: "新城区",
                    value: "610102",
                  },
                  {
                    text: "碑林区",
                    value: "610103",
                  },
                ],
              },
            ],
          },
        ],
        addrPickerShow: true,
        addrList: [],
      };
    },
    onLoad() {
      this.addrList = [
        this.treeList,
        this.treeList[0].children,
        this.treeList[0].children[0].children,
      ];
    },
    methods: {
      handAddrClick() {
        this.addrPickerShow = true;
      },
      changeHandler(e) {
        const {
          columnIndex,
          value,
          values, // values为当前变化列的数组内容
          index,
          // 微信小程序无法将picker实例传出来，只能通过ref操作
          picker = this.$refs.uPicker,
        } = e;
        // 当第一列值发生变化时，变化第二列(后一列)对应的选项
        if (columnIndex === 0) {
          // picker为选择器this实例，变化第二列对应的选项
          picker.setColumnValues(1, value[0].children);
          // picker为选择器this实例，变化第三列对应的选项
          picker.setColumnValues(2, value[0].children[0].children);
        }

        if (columnIndex === 1) {
          // picker为选择器this实例，变化第三列对应的选项
          picker.setColumnValues(2, value[0].children[index].children);
        }
      },
      // 回调参数为包含columnIndex、value、values
      confirm(e) {
        console.log("confirm", e);
        this.addrPickerShow = false;
      },
      cancel() {
        this.addrPickerShow = false;
      },
    },
  };
</script>

<style scoped>
  .container {
    width: 100vw;
    padding-top: 16rpx;
    min-height: calc(100vh - 16rpx);
    background: #eff0f5;
  }

  .p-card {
    width: 710rpx;
    box-sizing: border-box;
    min-height: 100rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin: auto;
    padding: 30rpx 24rpx;
  }

  .p-card + .p-card {
    margin-top: 16rpx;
  }

  .p-title {
    font-size: 34rpx;
    font-weight: 500;
    color: #232323;
  }
</style>