记录uni-app好用的select组件

FAIRY_STARS2025-08-28 16:26

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组件