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

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

<el-selectref="productRef"filterableclearablev-model="fItem.productName"multiple:reserve-keyword="true"remote:filter-method="remoteMethod"@visible-change="visibleChange"@keyup.enter="handleEnterKey(fIndex)"
><el-optionv-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;}});}
}