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' }
]
相关推荐
shadouqi5 分钟前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
旧曲重听127 分钟前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿36 分钟前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉41 分钟前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽1 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课1 小时前
React useEffect 详解与运用
前端·react.js
我想说一句1 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1231 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
小鱼小鱼干1 小时前
【Tauri】Tauri中Channel的使用
前端
拾光拾趣录1 小时前
CSS全面指南:从基础布局到高级技巧与实践
前端·css