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

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

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

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

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