uni-app 省市区街道的四级联动选择

在处理 uni-app 中的省市区街道四级联动选择时，我们可以利用 picker 组件来实现。下面是一个简单的代码示例，展示了如何实现这一功能。

首先，确保你有一个包含省市区街道数据的 JSON 文件。这里假设你的数据结构如下：

[
  {
    "name": "省份1",
    "cities": [
      {
        "name": "城市1-1",
        "districts": [
          {
            "name": "区1-1-1",
            "streets": ["街道1-1-1-1", "街道1-1-1-2"]
          }
        ]
      }
    ]
  },
  // 更多省份数据...
]

1. 创建页面和数据绑定

在你的 uni-app 项目中，创建一个页面用于显示选择器，并绑定数据。

<template>
  <view>
    <picker mode="multiSelector" :range="multiArray" @change="bindMultiPickerChange">
      <view class="picker">
        {{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}} {{multiArray[2][multiIndex[2]]}} {{multiArray[3][multiIndex[3]] || '请选择'}}
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      address: [], // 地址数据
      multiArray: [], // 多列选择器数据源
      multiIndex: [0, 0, 0, 0] // 多列选择器选中项索引
    };
  },
  onLoad() {
    this.getAddressData(); // 加载地址数据
  },
  methods: {
    getAddressData() {
      // 模拟从服务器获取数据
      this.address = require('@/static/address.json'); // 替换为你的数据路径
      this.initMultiArray();
    },
    initMultiArray() {
      // 初始化 multiArray 和 multiIndex
      this.multiArray = [this.address.map(item => item.name), [], [], []];
      this.updateMultiPicker();
    },
    updateMultiPicker() {
      // 根据选中的省份和城市更新区和街道
      // ...（实现逻辑，根据 multiIndex 更新 multiArray 的后续部分）
    },
    bindMultiPickerChange(e) {
      // 处理选择器变化事件
      this.multiIndex = e.detail.value;
      this.updateMultiPicker();
    }
  }
};
</script>

2. 实现 updateMultiPicker 方法

在 updateMultiPicker 方法中，你需要根据当前选中的省市区来动态更新街道列表。由于篇幅限制，这里不展开具体实现，但基本思路是：

• 根据 multiIndex[0] 获取当前选中的省份。
• 根据 multiIndex[1] 获取当前选中的城市。
• 根据城市和省份组合获取对应的区列表，并更新 multiArray[2]。
• 根据区和城市组合获取对应的街道列表，并更新 multiArray[3]。

这样，你就实现了一个省市区街道四级联动的选择器。注意，实际应用中还需处理数据加载错误、空数据等情况。