el-select实现可复制一段“关键词“(多个)实现搜索 以及 回车选中搜索项

文章讲述了如何在Vue的ElementUI组件el-select中实现可复制的多个关键词搜索功能,通过remote属性和filter-method自定义搜索方法,并在用户按下回车键时自动选中匹配的搜索项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

el-select实现可复制一段"关键词"(多个)实现搜索 以及 回车选中搜索项

<el-select
	ref="productRef"
	filterable
	clearable
	v-model="fItem.productName"
	multiple
	:reserve-keyword="true"
	remote
	:filter-method="remoteMethod"
	@visible-change="visibleChange"
	@keyup.enter="handleEnterKey(fIndex)"
>
	<el-option
		v-for="(item3, index3) in portFullNameOpt"
		:key="index3"
		:label="(item3.productCode ? '(' + item3.productCode + ')' : '') + item3.productName"
		:value="item3.productId"
	></el-option>
</el-select>

添加remote属性,用filter-method实现自定义搜索方法

// 多搜索
function remoteMethod(query: any) {
	if (query !== '') {
	// 当前场景query是以空格分开的关键词,比如"001  002",所以处理成数组形式
		state.keyUpData = query.split(' ');
		// 接口过滤
		selectAllProductInfo({ productName: query }).then((res: any) => {
			state.portFullNameOpt = res.data;
		});
	} else {
		state.portFullNameOpt = state.pordOriginalOpt;
	}
}
// 下拉框消失时,恢复默认选项
function visibleChange(data: any) {
	if (!data) {
		state.portFullNameOpt = state.pordOriginalOpt;
	}
}
// 回车自动选中搜索过滤出来的选项
function handleEnterKey(fIndex: number) {
	if (state.keyUpData.length) {
	// 场景:复制搜索的是关键词,但是绑定的是productId,所以处理一下
		const queryProductId = state.portFullNameOpt.filter((item1: { productCode: any }) => state.keyUpData.includes(item1.productCode)).map((item2: { productId: any }) => item2.productId);
		// console.log(queryProductId, 'att');
		state.newAgencySalesList.forEach((item: any, index: number) => {
			if (fIndex == index) {
				item.productName = queryProductId;
			}
		});
	}
}
<div v-show="showSearch" class="inner-search"> <div class="inner-search-line">查询表格</div> <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="98px"> <div class="inner-flex"> <el-row class="inner-left"> <el-col :span="6"> <el-form-item label="楼宇编号" prop="buildingLightCode"> <el-input v-model="queryParams.buildingLightCode" placeholder="请输入楼宇编号" clearable @keyup.enter="handleQuery" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="所在区域" prop="region"> <el-select v-model="queryParams.region" placeholder="请选择所在区域" clearable> <el-option v-for="dict in sys_region_category" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="设施状态" prop="equipStatus"> <el-select v-model="queryParams.equipStatus" placeholder="请选择设施状态" clearable> <el-option v-for="dict in sys_status_category" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="道路类型" prop="roadType"> <el-select v-model="queryParams.roadType" placeholder="请选择道路类型" clearable @change="handleRoadTypeChange"> <el-option v-for="dict in sys_road_type" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="道路名称" prop="roadName"> <el-input v-model="queryParams.roadName" placeholder="请选择道路名称" clearable filterable :disabled="!queryParams.roadType" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="楼宇灯类型" prop="buildingLightCategory"> <el-select v-model="queryParams.buildingLightCategory" placeholder="请选择楼宇灯类型" clearable> <el-option v-for="dict in sys_building_light_category" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="光源类型" prop="lightCategory"> <el-select v-model="queryParams.lightCategory" placeholder="请选择光源类型" clearable> <el-option v-for="dict in sys_light_type" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="创建时间"> <el-date-picker style="width: 100%; max-width: 268px" v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker> </el-form-item> </el-col> </el-row> <div class="inner-right"> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button> </div> </div> </el-form> </div> 分析这段代码的结构,告诉我其中的组件都是怎么用的
最新发布
07-18
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值