记录uni-app好用的select组件

w-select

​编辑

使用原因:

可以多选,支持搜索,支持输入值不选择也可以保存内容,可以进行分页查询

最最最重要的是代码简单,可以在源码上进行修改

缺点就是悬浮出来的选择框,有时候位置不太好(这个也可能是我自己的原因,回头我再试试)

使用方法:

import WSelect from "@/components/w-select/w-select.vue"

目前我只用过这样的引用,后面研究下,或者各位同僚有更好的方法可以私信我

全选按钮是我自己加的,目前还没在原组件上进行修改,只增加了props

ini 复制代码
<uni-data-checkbox 
    mode="tag" 
    v-model="isSelectAll" 
    multiple :
    localdata="optionsDataTag" 
    @change="selectAll()">
</uni-data-checkbox>
<w-select 
    ref="peopleSelect"
    v-model='peopleId' // 绑定输出的内容是keyName
    :list='peopleList' // 列表数据
    valueName='name' // label          			
    keyName="id" // value 唯一的值
    @change='selectPeople' // 选择后返回当前选中数据的所在对象
    :multiple="true" // 是否多选	
    :isSelectAll="isSelectAll"  // 修改组件,为组件增加条件选择,是否进行多选isSelectAll:{type:                         
                                // Boolean,default: false}
    :filterable="true" // 开启输入查询
    :isInputSave="true" // 开启输入保存
    :isRemoteLoad="true" // 选项是否从服务器远程加载			
    :remoteParams="remoteParams" // 请求接口、方法、参数		
</w-select>

remoteParams: {
					url: "xxxxxxxxxxxxx",
					method: "post",
					data: {
						id: ""
					}
				}

有些简陋,回头再完善一下,有兴趣的我们可以一起讨论

luyj-select-lay

​编辑

使用原因:

这个我只是觉得好看

原插件地址-----ext.dcloud.net.cn/plugin?id=5...

使用方法:

导入项目之后,使用组件就好

希望大家也可以给我分享一些好用的select组件

相关推荐
FAIRY_STARS3 小时前
关于uni-app pages.json配置详解
uni-app
FliPPeDround4 小时前
🚀 定义即路由:definePage宏如何让uni-app路由配置原地起飞?
前端·vue.js·uni-app
iOS阿玮5 小时前
苹果审核被拒4.8.0条款,快速过审通关指南。
uni-app·app·apple
Ratten9 小时前
uniapp的H5 在 UC 浏览器中返回上一页失效的解决方案
uni-app
Ratten9 小时前
uniapp 的 H5和微信小程序上传 base64 图片
uni-app
Ratten9 小时前
使用 uniapp 扩展组件 uni-file-picker 实现视频和图片都可以预览展示
uni-app
Ratten9 小时前
在 HBuilderX 中使用 tailwindcss
uni-app
江湖行骗老中医1 天前
uniapp 引入使用u-view 完整步骤,u-view 样式不生效
uni-app
雪芽蓝域zzs1 天前
uniapp 页面favicon.ico文件不存在提示404问题解决
uni-app