uview u-picker省市区三级联动

uview的u-picker组件可以实现省市区三级联动，使用时需要设置相应的数据源。以下是一个简单的例子：

<template>
  <view>
    <u-picker
      :picker-data="pickerData"
      :default-value="defaultValue"
      @change="onChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      pickerData: [],
      defaultValue: [],
    };
  },
  mounted() {
    // 获取省市区数据
    this.getAreaData();
  },
  methods: {
    async getAreaData() {
      // 发送请求获取省市区数据
      const res = await this.$http.get('/api/area');
      // 处理数据，将数据转换为u-picker可用的格式
      this.pickerData = [
        {
          label: '请选择',
          value: '',
          children: res.data.map((province) => ({
            label: province.name,
            value: province.id,
            children: province.cities.map((city) => ({
              label: city.name,
              value: city.id,
              children: city.areas.map((area) => ({
                label: area.name,
                value: area.id,
              })),
            })),
          })),
        },
      ];
      // 设置默认值为当前所在地区
      this.setDefaultArea();
    },
    setDefaultArea() {
      // 获取当前所在地区，将其设置为默认值
      const area = this.$store.state.area;
      if (area.province && area.city && area.area) {
        this.defaultValue = [area.province.id, area.city.id, area.area.id];
      }
    },
    onChange(value) {
      // 处理选中的值
      console.log(value);
    },
  },
};
</script>

在上面的代码中，我们使用了u-picker组件，并将picker-data设置为一个数组，数组中包含省市区三级数据。defaultValue设置为一个数组，数组中包含当前所在地区的id，这样在渲染u-picker时，就会自动选中对应的省市区。当用户选择省市区时，会触发onChange事件，我们可以在这里处理用户选择的省市区数据。