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);
	state.searchValue = '';
};

// 组件初始化赋值
const set = (brand: any) => {
	if (brand) {
		if (!state.tableData.find((el: any) => el.id == brand.id)) {                
            state.tableData.push(brand);
        }
		state.brand = brand;
	}
};

// 返回给需要的组件
const get = () => {
	return state.brand.id;
};

defineExpose({ set, get });
</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>