uniapp 有没有级联多选的组件可以使用？

在uniapp开发中，需要使用级联多选组件，但官方组件库里似乎没有找到合适的。请问有没有现成的级联多选组件可以使用？最好是支持多级联动选择，并且能兼容小程序和H5端的。如果有第三方插件推荐，也请说明一下使用方法和注意事项。

2 回复

有。uni-app官方没有专门的级联多选组件，但可以通过<picker>的mode="multiSelector"实现多列选择，或使用第三方组件如uni-data-picker、uni-cascader等插件库实现更完整的级联多选功能。


是的，uni-app 提供了 <picker> 组件，通过设置 mode="multiSelector" 可以实现级联多选功能。以下是具体实现方法：

核心代码示例

<template>
  <view>
    <picker 
      mode="multiSelector" 
      :range="multiArray" 
      :value="multiIndex"
      @change="onMultiChange"
      @columnchange="onColumnChange"
    >
      <view>当前选择：{{ selectedValues }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      multiArray: [
        ['前端', '后端'],           // 第一级
        ['Vue', 'React'],          // 第二级（初始）
        ['基础', '进阶']            // 第三级（初始）
      ],
      multiIndex: [0, 0, 0],
      selectedValues: []
    }
  },
  methods: {
    // 列数据变化时触发（联动关键）
    onColumnChange(e) {
      const { column, value } = e.detail
      const data = JSON.parse(JSON.stringify(this.multiArray))
      const idx = JSON.parse(JSON.stringify(this.multiIndex))
      
      idx[column] = value
      
      // 根据第一列动态更新第二列数据
      if (column === 0) {
        switch(value) {
          case 0: 
            data[1] = ['Vue', 'React', 'Angular']
            data[2] = ['基础', '进阶']
            break
          case 1: 
            data[1] = ['Java', 'Python', 'Go']
            data[2] = ['初级', '高级']
            break
        }
        idx[1] = 0
        idx[2] = 0
      }
      
      // 根据第二列动态更新第三列数据
      if (column === 1) {
        // 可继续添加具体逻辑
      }
      
      this.multiArray = data
      this.multiIndex = idx
    },
    
    // 最终选择确认
    onMultiChange(e) {
      const values = e.detail.value
      this.selectedValues = values.map((item, index) => {
        return this.multiArray[index][item]
      })
    }
  }
}
</script>

使用说明

  1. 数据格式：multiArray 需要三维数组，分别对应各级选项
  2. 联动原理：通过监听 @columnchange 事件，动态修改后续列的数据源
  3. 取值方式：在 @change 事件中通过 multiIndex 获取选中项的索引

扩展方案

如需更复杂的样式和功能，推荐使用第三方组件：

  • uni-data-picker：DCloud官方数据驱动组件
  • uni-cascader：社区开发的级联选择器

在插件市场搜索以上组件名称即可找到详细文档和使用示例。

以上实现可以满足大部分级联选择需求，实际开发时根据业务数据调整动态加载逻辑即可。

回到顶部