解决:el-select可输入时失焦会失去输入框中值
1、展示部分
<template><el-select v-model="addForm.companyName" filterable placeholder="请输入/选择公司名称" :loading="loading":filter-method="(value) => dataFilter(value)" @change="selectCompany"><el-option v-for="item in companys" :key="item.id" :label="item.name" :value="item.id" /><template #loading><el-icon class="is-loading"><svg class="circular" viewBox="0 0 20 20"><g class="path2 loading-path" stroke-width="0" style="animation: none; stroke: none"><circle r="3.375" class="dot1" rx="0" ry="0" /><circle r="3.375" class="dot2" rx="0" ry="0" /><circle r="3.375" class="dot4" rx="0" ry="0" /><circle r="3.375" class="dot3" rx="0" ry="0" /></g></svg></el-icon></template></el-select>
</template>
2.功能
<script setup>
import { onMounted, reactive, ref } from 'vue';
// 公司列表
const companys = reactive([])
const companylists= reactive([])
// loading状态
const loading = ref(false)
// 公司名称
const companyName = ref('')
// 筛选公司条件
const dataFilter = (query) => {if (query) {companyName.value = query;loading.value = truesetTimeout(() => {loading.value = false;companys= companylists.filter(item => item.name.includes(query)).slice(0, 10);}, 30)} else {companys.companys = []}
}
// 改变时修改
const selectCompany = (value) => {// value
}
</script>