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

前往插件市场安装插件下拉搜索选择框 - 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' }
]
相关推荐
90后的晨仔1 分钟前
🧱 《响应式基础》— Vue 如何追踪你的数据变化?
前端·vue.js
smile boy12 分钟前
个人财务记录应用
前端·javascript·css·css3·html5
hqxstudying18 分钟前
J2EE模式---业务代表模式
java·前端·python·设计模式·java-ee·mvc
90后的晨仔32 分钟前
🚀 Vue 声明式渲染:让 HTML 跟着数据走(超详解)
前端·vue.js
CAD老兵38 分钟前
package.json 中 dependencies 的版本号:它真的是版本号吗?
前端·javascript
汤姆大聪明42 分钟前
Spring Cloud Gateway 服务网关
java·服务器·前端
Python大数据分析1 小时前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
OEC小胖胖1 小时前
架构篇(一):告别MVC/MVP,为何“组件化”是现代前端的唯一答案?
前端·架构·mvc