更新记录

1.0.56（2025-05-13） 下载此版本

提取公共方法，功能未变

1.0.55（2025-03-27） 下载此版本

初始默认列表报错bug修复

1.0.54（2024-12-23） 下载此版本

修改bug

平台兼容性

uni-app

其他

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>

参数

options 参数

事件

插槽