更新记录

1.0.0（2026-10-12） 下载此版本

• 首个版本
• 数据驱动 + 字段映射（label / value / disabled），适配任意数据结构
• 通过 multiple 属性切换单选 / 多选，用法与 el-select 的 multiple 一致
• 支持一键清除、整体禁用、无选项提示
• 多选超长回显自动折叠为「+N」，可自定义展示数量与分隔符
• 支持主题色自定义
• v-model 双向绑定，Vue2 / Vue3 双兼容

平台兼容性

uni-app(5.0)

uni-app x(5.0)

其他

Rui-multiDataSelect 多选下拉选择器

通用下拉选择组件：选择框 + 下拉面板，选项由 data 数据驱动、字段可映射，通过 multiple 属性即可在单选 / 多选之间切换，用法与 element-plus 的 el-select 一致。

组件不依赖任何业务接口或数据格式，开箱即用。

功能特性

• 数据驱动 + 字段映射 props（label / value / disabled），适配任意数据结构
• multiple 属性切换单选 / 多选：多选逐项勾选、单选选中即关闭
• 多选超长回显自动折叠为「+N」，展示数量与分隔符可自定义
• 支持一键清除、整体禁用、无选项提示
• 支持主题色自定义
• 点击遮罩自动关闭下拉面板
• v-model 双向绑定，Vue2、Vue3 项目均可直接使用，无需适配

数据格式

默认选项字段为 label / value / disabled：

const options = [
  { label: '研发中心', value: 'dev' },
  { label: '市场中心', value: 'market' },
  { label: '职能中心', value: 'hr', disabled: true }
]

若字段名不同，通过 props 映射：

<Rui-multiDataSelect v-model="form.depts" :data="options"
  :props="{ label: 'name', value: 'code', disabled: 'disabledFlag' }" />

快速上手

<!-- 多选（默认） -->
<Rui-multiDataSelect v-model="form.depts" :data="options" />

<!-- 单选：设置 :multiple="false" -->
<Rui-multiDataSelect v-model="form.dept" :data="options" :multiple="false" />

<!-- 不可清除 + 禁用 -->
<Rui-multiDataSelect v-model="form.depts" :data="options" :clearable="false" disabled />

<!-- 自定义占位、无选项提示、折叠数量、分隔符、主题色 -->
<Rui-multiDataSelect v-model="form.depts" :data="options"
  placeholder="请选择部门" empty-text="暂无部门"
  :max-show="2" separator="，" primary-color="#ff6600" />

Props

Events

使用说明

• 多选模式下 v-model 为数组，单选模式下为单个值；清除时多选回传 []、单选回传 ''
• 多选模式下点击选项为勾选 / 取消，面板保持打开；单选模式下选中后自动关闭面板
• 选项值为 0、'' 等非真值时也能正常参与选中判断（内部按字符串比较）
• 点击下拉面板外的遮罩区域可关闭面板
• 该组件为下拉面板（跟随选择框向下弹出），如需底部弹窗形式可自行调整样式

兼容性

• 支持：App（vue 页面）、H5、微信 / 支付宝 / 百度 / 字节跳动 / QQ 小程序
• 不支持：nvue 页面
• Vue2、Vue3 项目均支持