el-select 搜索无选项时 请求接口添加输入的值

el-select 搜索无选项时 请求接口添加输入的值

实现思路：在搜索方法中把输入的值储存起来，然后通过搜索为空的插槽显示需要添加的值，点击添加的时候请求添加选项接口

如果数据量少的话可以直接本地搜索，在为空的情况下添加所需的值，然后在添加成功后重新请求一次全部值

<template>
	<div class="flex">
		<el-select class="w250" v-model="state.brand.id" placeholder="请选择"  clearable             
           filterable :filter-method="handleQuery" @change="tagHandler">
			<el-option v-for="item in state.tableData" :key="item.id"            
                :label="item.displayName" :value="item.id">
			</el-option>
            // 搜索为空时的插槽
			<template #empty>
				<div class="add-item">
					<span class="add-item-value" @click="addBrand">
					     <el-icon><Plus /></el-icon>添加 
                         <span class="searchValue">{{ state.searchValue }}</span>
					</span>
				</div>
			</template>
		</el-select>
	</div>
</template>
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
const state = reactive({
    // 品牌的数据结构
	brand: {
		id: undefined,
		displayName: '',
	},
    // 全部的选项
	tableData: [] as any,
    // 存放输入的值
	searchValue: '',
});

onMounted(() => {
    // 初始请求一次全部选项
	handleQuery('');
});

// 选择以后清空选择框的输入值
const tagHandler = () => {
	state.searchValue = '';
};

// 输入值开始搜索
const handleQuery = async (e: any) => {
    // 把输入的值存起来,页面显示需要用
	state.searchValue = e;
	let res = await getAPI(ProductExtApi);
	state.tableData = res.data.result?.items ?? [];
};


// 添加品牌
const addBrand = async () => {
    // 请求添加接口
	let res = await getAPI(BrandApi)({
		displayName: state.searchValue,
	});

    // 接口返回ID 赋值到我们自定义的数据上面
	state.brand = {
		id: res.data.result ?? 0,
		displayName: state.searchValue,
	};

    // 添加完执行一次搜索
	if (res.data.code == 200) handleQuery(state.searchValue);
};

// 组件初始化的时候判断选项里有没这个值，没有的话手动push进去
const init = (brand: any) => {
	if (brand) {
		if (!state.tableData.find((el: any) => el.id == brand.id)) {                
            state.tableData.push(brand);
        }
		state.brand = brand;
	}
};

</script>

<style lang="scss" scoped>

.add-item {
	padding: 10px;
	font-size: 14px;

	.add-item-value {
		cursor: pointer;
	}

	i {
		vertical-align: text-top;
		margin-right: 5px;
	}

	.searchValue {
		color: var(--el-color-primary);
		margin-left: 5px;
	}
}</style>