uniapp 省市区县联动组件如何使用

在uniapp中如何使用省市区县联动组件？我在官方文档里没有找到相关的组件说明，想实现一个可以选择省市区县的三级联动功能。请问有没有现成的插件或者组件可以直接使用？如果需要自己实现的话，大概的思路是什么？最好能提供一个简单的代码示例。

2 回复

使用uniapp的省市区县联动组件，需要先引入组件，然后通过picker-view实现。步骤如下：

  1. 引入picker-view组件
  2. 设置三级数据源（省市区）
  3. 绑定change事件监听选择
  4. 获取选中值

示例代码：

<picker-view @change="onChange">
  <picker-view-column>
    <view v-for="item in provinces">{{item.name}}</view>
  </picker-view-column>
  // 其他列类似
</picker-view>

在 UniApp 中，实现省市区县联动通常使用官方扩展组件 <picker> 的 mode="region" 模式，或结合第三方组件库（如 uView、uni-ui）实现。以下是两种常用方法：

方法一：使用官方 <picker> 组件（推荐）

通过设置 mode="region" 直接调用原生地区选择功能，简单高效。

代码示例：

<template>
  <view>
    <picker mode="region" @change="onRegionChange" :value="region">
      <view>当前选择：{{ region.join(' ') }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      region: ['北京市', '北京市', '东城区'] // 初始值（省、市、区）
    }
  },
  methods: {
    onRegionChange(e) {
      this.region = e.detail.value; // 更新选中值
      console.log('选中地区:', this.region);
    }
  }
}
</script>

参数说明：

  • mode="region"：固定为地区选择模式。
  • @change：选择完成后的回调事件。
  • :value：绑定当前选中的省市区数组。

方法二：使用 uViewUI 组件库

若需要更多自定义样式或功能，可安装 uViewUI（需先引入组件库）。

  1. 安装 uViewUI（通过 HBuilderX 插件市场或 npm 安装）。
  2. 使用组件：
<template>
  <u-picker 
    :show="showPicker" 
    :columns="columns" 
    @confirm="onConfirm"
    @cancel="showPicker = false"
  ></u-picker>
  <button @click="showPicker = true">选择省市区</button>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      columns: [] // 通过异步加载省市区数据
    }
  },
  mounted() {
    // 实际项目中需从接口或本地JSON加载数据
    this.columns = [
      [...省份数组...],
      [...城市数组...],
      [...区县数组...]
    ];
  },
  methods: {
    onConfirm(e) {
      console.log('选中值:', e.value);
      this.showPicker = false;
    }
  }
}
</script>

注意事项：

  1. 官方 <picker> 兼容性好，但样式固定。
  2. 自定义组件 需自行维护省市区数据（可参考民政部数据）。
  3. 若需要默认值，需保证数据格式与组件要求一致。

根据需求选择合适方案，一般场景推荐使用官方 picker 组件。

回到顶部