uniapp 如何实现省市区选择功能

在uniapp中如何实现省市区三级联动选择功能？希望找一个简单高效的解决方案，最好能支持数据动态加载和回显功能。目前尝试过picker组件但只能实现单列选择，请问有没有现成的插件或者更好的实现方式？数据源是用本地JSON还是需要调用接口获取？

2 回复

使用uni-app实现省市区选择，推荐以下方法：

  1. 使用uni-data-picker组件（官方推荐）
<uni-data-picker placeholder="请选择省市区" />
  1. 使用第三方插件
  • uView的u-picker组件
  • 安装城市选择插件
  1. 自定义picker组件 结合picker-view实现三级联动

建议使用uni-data-picker，内置数据源，开箱即用。


在 UniApp 中实现省市区选择功能，可以通过以下方法实现：

1. 使用官方 picker 组件（适用于简单场景）

  • 使用多列选择器 <picker mode="multiSelector">，但需要手动处理数据联动。
  • 示例代码：
<template>
  <view>
    <picker mode="multiSelector" :range="regionData" @change="onRegionChange">
      <view>选择省市区：{{selectedRegion.join('-')}}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      regionData: [
        ['北京', '上海', '广东'],
        ['北京市区', '上海城区', '广州市', '深圳市'],
        ['东城区', '西城区', '朝阳区', '浦东新区', '天河区']
      ],
      selectedRegion: []
    }
  },
  methods: {
    onRegionChange(e) {
      this.selectedRegion = [
        this.regionData[0][e.detail.value[0]],
        this.regionData[1][e.detail.value[1]],
        this.regionData[2][e.detail.value[2]]
      ]
    }
  }
}
</script>

2. 使用第三方组件（推荐）

  • 安装 uni-area 组件：
npm install @vant/area-data
  • 使用示例：
<template>
  <view>
    <van-area :area-list="areaList" @confirm="onConfirm" />
  </view>
</template>

<script>
import { areaList } from '@vant/area-data';

export default {
  data() {
    return {
      areaList: areaList,
      selectedArea: ''
    }
  },
  methods: {
    onConfirm(event) {
      this.selectedArea = event.detail.values.map(item => item.name).join('')
    }
  }
}
</script>

3. 自定义组件+本地数据

  • 使用中国行政区划数据 JSON 文件
  • 实现三级联动选择器
  • 数据来源：阿里云行政区划数据

注意事项：

  1. 数据量较大时建议使用懒加载
  2. 可结合 uni-app 的 picker-view 组件实现更灵活的界面
  3. 考虑数据更新维护，建议使用最新行政区划数据

推荐使用第二种方式（vant area组件），数据完整且维护方便。

回到顶部