更新记录
1.0.58(2025-07-14) 下载此版本
优化兼容性
1.0.57(2025-07-14) 下载此版本
兼容vue2小程序
1.0.56(2025-05-13) 下载此版本
提取公共方法,功能未变
查看更多平台兼容性
lu-data-select
数据下拉选择组件
单选、多选,关键词过滤,清空,空数据插槽,标题过长显示省略号
数据列表较多时,选中再次打开,选中的数据项,自动滚动到可视区域
示例代码
<template>
<view class="content">
<view class="title">1.单选,过滤</view>
<lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition1" :multiple="false" :filterable="true" @change="onchange"></lu-data-select>
<view class="title">2.单选,过滤,change返回对象格式</view>
<lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition1" filterable changeType="objectValue" @change="onchange"></lu-data-select>
<view class="title">3.多选,过滤</view>
<lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition" :filterable="true" :multiple="true" @change="onchange"></lu-data-select>
<view class="title">4.多选,过滤,change返回对象格式</view>
<lu-data-select
disabled
placeholder="请选择数据"
:options="selectData"
v-model="condition"
:filterable="true"
:multiple="true"
changeType="objectValue"
@change="onchange"
></lu-data-select>
<view class="title">5.自定义空数据插槽</view>
<lu-data-select placeholder="请选择数据" :options="selectData1" v-model="condition" :multiple="true" :clearable="true" :filterable="true" @change="onchange">
<template #empty>
<view style="text-align: center; padding: 20rpx; color: #f00">空数据插槽</view>
</template>
</lu-data-select>
<view class="title">6.自动判断弹出方向,演示,无需配置</view>
<lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition" :multiple="true" :clearable="true" :filterable="true" @change="onchange">
<template #empty>
<view style="text-align: center; padding: 20rpx; color: #f00">空数据插槽</view>
</template>
</lu-data-select>
<view class="title">7.边框,css的border属性,单选模式选择框高度height,多选默认自动增高</view>
<lu-data-select
placeholder="请选择数据"
:options="selectData"
v-model="condition1"
:multiple="false"
:filterable="true"
height="100rpx"
border="1px solid #f00"
@change="onchange"
></lu-data-select>
<view class="title">8.禁用选择</view>
<lu-data-select placeholder="请选择数据" disabled :options="selectData" v-model="condition1"></lu-data-select>
</view>
</template>
<script setup>
import { ref, watch } from 'vue';
const condition1 = ref('8');
const condition2 = ref('8');
const condition = ref(['7']); //多选必须是数组格式
const selectData1 = ref([]);
const selectData = ref([
{
value: '1',
label: '测试标题测试标题测试标题测试标题测试标题测试标题测试标题1'
},
{
value: '2',
label: '数据2',
disabled: true
},
{
value: '3',
label: '数据3',
disabled: false
},
{
value: '4',
label: '数据4',
disabled: true
},
{
value: '5',
label: '数据5'
},
{
value: '6',
label: '数据6'
},
{
value: '7',
label: '数据7'
},
{
value: '8',
label: '数据8'
},
{
value: '9',
label: '数据9'
},
{
value: '10',
label: '数据10'
},
{
value: '11',
label: '数据数据数据数据数据数据数据数据数据数据数据数据数据11'
},
{
value: '12',
label: '数据12'
},
{
value: '13',
label: '数据列表13'
}
]);
const onchange = (e) => {
console.log(e);
};
</script>
<style lang="scss" scoped>
.content {
padding: 20px;
.title {
padding: 10px 0;
}
}
</style>
参数
参数名称 | 类型 | 默认值 | 可选值 | 说明 |
---|---|---|---|---|
v-model | String | 选中项绑定的值 | ||
options | Array | [ ] | 数据列表,见下方 options 参数 | |
labelKey | String | label | 作为 label 唯一标识的键名 | |
valueKey | String | value | 作为 value 唯一标识的键名 | |
multiple | Boolean | false | true / false | 是否多选 |
filterable | Boolean | true | true / false | 是否可以筛选 |
clearable | Boolean | true | true / false | 是否可以清空 |
placeholder | String | 请选择 | 默认提示语 | |
disabled | Boolean | false | true / false | 是否禁用选择 |
border | String | '1px solid #e5e5e5' | css属性值 | 边框设置 |
showEllipsis | Boolean | true | true / false | 选项过长是否显示省略号 |
height | String | '35px' | css属性值 | 选择框高度,单选模式有效 |
collapseTags | Boolean | false | true / false | 是否折叠 |
collapseTagsNum | Number | 1 | 多少开始折叠 | |
virtualList | Boolean | false | true / false | 大数据开启虚拟列表 |
emptyText | String | 无数据 | options 为空的时候显示的文本 | |
changeType | String | " ",可以不传,默认是返回value | "objectValue" | change事件返回的数据格式,默认:单选返回value值,多选返回value组成的数组,objectValue:单选返回对象,多选返回数组对象 |
options 参数
名称 | 类型 | 说明 |
---|---|---|
label | String / Number | 选项的标签 |
value | String / Number | 选项的值 |
disabled | Boolean | 是否禁用该选项 |
事件
事件 | 说明 |
---|---|
change | 选项发生改变时触发 |
插槽
名称 | 说明 |
---|---|
empty | 自定义无数据内容 |
option | 自定义选项插槽,返回值row:当前选项,$index:当前选项数组下标 |