# lu-data-select

# 数据下拉选择组件

单选、多选，关键词过滤，清空，空数据插槽，标题过长显示省略号

数据列表较多时，选中再次打开，选中的数据项，自动滚动到可视区域

# 示例代码

```javascript

<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				| 是否多选																																																			|
| direction				| String	| ""													| down / up						| 弹出方向，up、down, 其他值无效，自动判断方向																																			|
| 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：当前选项数组下标	|