uni-app实现单选，多选也能搜索，勾选，选择，回显

菌菇汤2025-07-05 8:39

前往插件市场安装插件下拉搜索选择框 - DCloud 插件市场，该插件示例代码有vue2和vue3代码

是支持微信小程序和app的

示例代码：

javascript 复制代码

<template>
  <view>
    <!-- 基础用法 -->
    <cuihai-select-search
      :options="options"
      v-model="value"
      placeholder="请选择"
      @change="onChange"
    />

    <!-- 多选模式 -->
    <cuihai-select-search
      :options="options"
      v-model="multipleValue"
      multiple
      placeholder="请选择多个"
      @change="onMultipleChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      multipleValue: [],
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' }
      ]
    }
  },
  methods: {
    onChange(value, option) {
      console.log('选择变化:', value, option)
    },
    onMultipleChange(values, options) {
      console.log('多选变化:', values, options)
    }
  }
}
</script>

属性说明

属性名	类型	默认值	说明
options	Array	\[\]	选项数据数组
value	String/Number/Array	null	当前选中值
multiple	Boolean	false	是否多选
searchable	Boolean	true	是否可搜索
placeholder	String	'请选择'	占位符文本
searchPlaceholder	String	'请选择'	搜索占位符
disabled	Boolean	false	是否禁用
maxHeight	String	300rpx	下拉框最大高度
emptyText	String	暂无数据	空数据提示
valueKey	String	value	选项值字段名
labelKey	String	label	选项标签字段名
showConfirmButton	Boolean	false	多选模式是否显示确认按钮
autoClose	Boolean	true	是否自动关闭下拉框（单选模式）

事件说明

事件名	说明	参数
change	选择变化时触发	(value, option) 或 (values, options)
input	值变化时触发	value 或 values

数据格式

复制代码

[
  { value: '1', label: '选项1' },
  { value: '2', label: '选项2' },
  { value: '3', label: '选项3' }
]