uniapp怎么实现三级联动功能

在uniapp中如何实现三级联动功能？比如省市区选择器，需要从后台获取数据并动态渲染。目前尝试了picker组件但只能实现单级选择，不知道如何将三级数据关联起来。求具体实现思路或代码示例，最好能支持数据异步加载和回显功能。

2 回复

使用uniapp实现三级联动，可通过picker组件的多列模式实现。步骤如下：

  1. 准备三级数据（如省市区）
  2. 使用picker的mode=“multiSelector”
  3. 监听列变化，动态更新下级数据
  4. 绑定selected值获取结果

示例代码：

data() {
  return {
    columns: [[省],[市],[区]],
    selected: [0,0,0]
  }
}

在uni-app中实现三级联动功能，可以通过以下步骤完成：

1. 数据准备

准备三级联动的数据，通常为嵌套的JSON结构：

data() {
  return {
    regionData: [
      {
        label: '北京',
        value: 'beijing',
        children: [
          {
            label: '北京市',
            value: 'beijing_city',
            children: [
              { label: '东城区', value: 'dongcheng' },
              { label: '西城区', value: 'xicheng' }
            ]
          }
        ]
      }
      // 更多数据...
    ],
    selected: ['', '', ''] // 用于存储各级选中的值
  }
}

2. 界面布局

使用<picker>组件实现三级选择器：

<view class="picker-group">
  <picker 
    mode="selector" 
    :range="firstLevel" 
    @change="onFirstChange"
  >
    <view>{{ selected[0] || '选择省份' }}</view>
  </picker>
  
  <picker 
    mode="selector" 
    :range="secondLevel" 
    @change="onSecondChange"
  >
    <view>{{ selected[1] || '选择城市' }}</view>
  </picker>
  
  <picker 
    mode="selector" 
    :range="thirdLevel" 
    @change="onThirdChange"
  >
    <view>{{ selected[2] || '选择区县' }}</view>
  </picker>
</view>

3. 计算属性处理层级数据

computed: {
  firstLevel() {
    return this.regionData.map(item => item.label)
  },
  secondLevel() {
    if (!this.selected[0]) return []
    const first = this.regionData.find(item => item.label === this.selected[0])
    return first ? first.children.map(item => item.label) : []
  },
  thirdLevel() {
    if (!this.selected[1]) return []
    const first = this.regionData.find(item => item.label === this.selected[0])
    if (!first) return []
    const second = first.children.find(item => item.label === this.selected[1])
    return second ? second.children.map(item => item.label) : []
  }
}

4. 事件处理

methods: {
  onFirstChange(e) {
    const index = e.detail.value
    this.selected = [
      this.firstLevel[index],
      '',
      ''
    ]
  },
  
  onSecondChange(e) {
    const index = e.detail.value
    this.selected = [
      this.selected[0],
      this.secondLevel[index],
      ''
    ]
  },
  
  onThirdChange(e) {
    const index = e.detail.value
    this.selected = [
      this.selected[0],
      this.selected[1],
      this.thirdLevel[index]
    ]
  }
}

5. 样式优化（可选）

.picker-group {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
}

picker {
  flex: 1;
  margin: 0 10rpx;
  text-align: center;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 10rpx;
}

使用说明：

  1. 确保数据格式正确嵌套
  2. 选择上级时会清空下级选项
  3. 可通过selected数组获取最终选择结果

这种方法适用于地址选择、分类选择等场景，可根据实际需求调整数据结构和样式。

回到顶部