mgm-daylight-mcrm-mobile-ios/uni_modules/lu-data-select/readme.md

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	是否多选
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：当前选项数组下标