uniapp picker 多选如何实现

在uniapp中如何实现picker组件的多选功能？官方文档中picker默认是单选的，我需要实现一个可以同时选择多个选项的picker，类似多选下拉菜单的效果。请问有没有现成的组件或解决方案？最好能支持设置默认选中项和获取选中值列表的功能。

2 回复

在uniapp中，使用<picker>组件实现多选，需设置mode="multiSelector"，并通过range传入二维数组。监听change事件获取选中值，用value数组控制默认选中项。


在 UniApp 中，实现多选 Picker 可以使用 picker 组件的 mode="selector" 配合 range 和 range-key 属性，但默认是单选。要实现多选，需要通过以下方法：

方法一：使用 checkbox 或自定义界面（推荐）

  1. 使用 checkbox 组件：结合 picker 显示选项，用户勾选后保存多选结果。
  2. 自定义弹窗：使用 uni-popup 或 uni-transition 创建多选界面。

示例代码（自定义弹窗方式）：

<template>
  <view>
    <!-- 触发按钮 -->
    <button @tap="showPicker = true">选择多项</button>
    
    <!-- 自定义多选弹窗 -->
    <view v-if="showPicker" class="picker-modal">
      <view class="picker-header">
        <text @tap="cancelPicker">取消</text>
        <text @tap="confirmPicker">确定</text>
      </view>
      <view class="picker-content">
        <checkbox-group @change="checkboxChange">
          <label v-for="(item, index) in options" :key="index">
            <checkbox :value="item.value" :checked="item.checked" /> {{ item.label }}
          </label>
        </checkbox-group>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      options: [
        { label: '选项1', value: '1', checked: false },
        { label: '选项2', value: '2', checked: false },
        { label: '选项3', value: '3', checked: false }
      ],
      selectedValues: []
    };
  },
  methods: {
    checkboxChange(e) {
      this.selectedValues = e.detail.value;
    },
    confirmPicker() {
      console.log('选中的值:', this.selectedValues);
      this.showPicker = false;
    },
    cancelPicker() {
      this.showPicker = false;
    }
  }
};
</script>

<style>
.picker-modal {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
}
.picker-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>

方法二：使用第三方组件

  • 安装如 uni-data-picker 或 uni-list 等多选组件库，简化开发。

注意事项：

  • 原生 picker 不支持多选，需自定义实现。
  • 确保界面友好，提供“确定”和“取消”操作。

以上方法灵活且兼容性好，适用于大部分多选场景。

回到顶部