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);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>