The picker component of uView 2.X realizes the linkage selection function of provinces, districts and counties

The picker component of uView 2.X realizes the linkage selection function of provinces, districts and counties

<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>