uniapp 省市县三级联动实现方法

在uniapp中如何实现省市县三级联动功能？需要选择省后自动加载对应的市列表，选择市后加载对应的县区列表。希望提供一个完整的实现方案，包括前端页面布局、数据绑定以及后端接口设计或本地数据存储方式。最好能给出具体代码示例或推荐可用的第三方组件。

2 回复

使用uniapp实现省市县三级联动，推荐以下方法：

  1. 使用picker组件，mode设置为region
<picker mode="region" @change="onRegionChange">
  <view>选择地区</view>
</picker>
  1. 配合v-model绑定数据
data() {
  return {
    region: []
  }
}
  1. 监听change事件获取选择结果
onRegionChange(e) {
  this.region = e.detail.value
}

这种方法简单快捷，内置了全国省市县数据，无需额外引入数据源。


在 UniApp 中实现省市县三级联动，可以通过以下步骤完成。以下是基于 picker 组件的实现方法，结合静态数据或动态数据加载。

实现思路

  1. 使用 picker 组件的多列模式（mode="multiSelector"）。
  2. 准备省、市、县三级数据（可以是静态 JSON 或通过 API 动态获取）。
  3. 根据用户选择动态更新市和县的数据。

代码示例

1. 模板部分

在模板中使用 picker 组件绑定数据：

<template>
  <view>
    <picker mode="multiSelector" :range="multiArray" :value="multiIndex" @change="onPickerChange" @columnchange="onColumnChange">
      <view>当前选择：{{ selectedProvince }} - {{ selectedCity }} - {{ selectedCounty }}</view>
    </picker>
  </view>
</template>

2. 脚本部分

定义数据和逻辑处理：

<script>
export default {
  data() {
    return {
      // 三级数据（示例为静态数据，实际可替换为 API 数据）
      provinces: [], // 省列表
      cities: [],    // 市列表
      counties: [],  // 县列表
      multiArray: [[], [], []], // picker 显示的三列数据
      multiIndex: [0, 0, 0],    // 当前选中的索引
      selectedProvince: '',
      selectedCity: '',
      selectedCounty: ''
    };
  },
  mounted() {
    // 初始化省份数据（示例数据）
    this.provinces = [
      { id: 1, name: '北京市', cities: [{ id: 101, name: '北京市', counties: [{ id: 1001, name: '东城区' }, { id: 1002, name: '西城区' }] }] },
      { id: 2, name: '河北省', cities: [{ id: 201, name: '石家庄市', counties: [{ id: 2001, name: '长安区' }, { id: 2002, name: '桥西区' }] }] }
    ];
    this.initPickerData();
  },
  methods: {
    // 初始化 picker 数据
    initPickerData() {
      this.multiArray[0] = this.provinces.map(p => p.name);
      this.updateCities(0);
      this.updateCounties(0, 0);
    },
    // 更新市列表
    updateCities(provinceIndex) {
      const cities = this.provinces[provinceIndex]?.cities || [];
      this.cities = cities;
      this.multiArray[1] = cities.map(c => c.name);
      this.multiIndex[1] = 0; // 重置市选中索引
    },
    // 更新县列表
    updateCounties(provinceIndex, cityIndex) {
      const counties = this.provinces[provinceIndex]?.cities[cityIndex]?.counties || [];
      this.counties = counties;
      this.multiArray[2] = counties.map(c => c.name);
      this.multiIndex[2] = 0; // 重置县选中索引
    },
    // 列数据变化时触发
    onColumnChange(e) {
      const { column, value } = e.detail;
      if (column === 0) { // 省列变化
        this.updateCities(value);
        this.updateCounties(value, 0);
      } else if (column === 1) { // 市列变化
        this.updateCounties(this.multiIndex[0], value);
      }
      this.multiIndex[column] = value;
    },
    // 确定选择时触发
    onPickerChange(e) {
      const indices = e.detail.value;
      this.multiIndex = indices;
      this.selectedProvince = this.provinces[indices[0]]?.name || '';
      this.selectedCity = this.cities[indices[1]]?.name || '';
      this.selectedCounty = this.counties[indices[2]]?.name || '';
    }
  }
};
</script>

说明

  • 数据源：示例使用静态 JSON 数据，实际开发中可通过 API 动态加载（例如在 mounted 中调用接口）。
  • 列更新：通过 @columnchange 事件监听列变化，动态更新下一级数据。
  • 样式调整：可根据需要自定义 picker 样式（如设置 range-key 如果数据为对象数组）。

扩展建议

  • 如果数据量大，建议使用动态加载（例如选择省后加载对应市数据）。
  • 可结合 uni.request 从服务器获取实时数据。

以上代码提供了基础实现，可根据实际需求调整数据结构和交互逻辑。

回到顶部