支持选择已有企业，也支持从远程搜索，也支持自己手动输入的下拉框

1. html

    <el-form ref="ruleFormRef" :model="ruleForm">
            <el-form-item label="录入企业：" prop="businessName">
                <el-select
                    v-model="ruleForm.businessName"
                    filterable
                    clearable
                    allow-create
                    default-first-option
                    placeholder="请输入或选择企业"
                    :filter-method="filterCompany"
                    :loading="selectLoading"
                    @change="changeCompany"
                    @compositionstart="handleCompositionStart"
                    @compositionend="handleCompositionEnd"
                >
                    <el-option v-for="item in displayEnterpriseList" :key="item.businessName" :label="item.businessName" :value="item.businessName" />
                </el-select>
            </el-form-item>
            <el-form-item label="企业统一社会信用代码：" prop="unifiedSocialCreditCode">
                <el-input v-model="ruleForm.unifiedSocialCreditCode" :disabled="ecodeDisabled" placeholder="请输入企业统一社会信用代码" />
            </el-form-item>
        </el-form>

2. js

const ruleForm = ref({
    businessName: '', // 录入企业名称
    unifiedSocialCreditCode: '', // 录入企业统一社会信用代码
});
// 企业
const selectLoading = ref(false);
const entList = ref<EnterpriseItem[]>([]); // 已有企业
const companyList = ref<EnterpriseItem[]>([]); // 远程查询出来的企业
const searchKeyword = ref(''); // 搜索关键词
const isComposing = ref(false); // 用于标记是否正在输入中文
const ecodeDisabled = ref(false); // 用于标记是否显示ecode
// 根据搜索关键词动态过滤显示的企业列表
const displayEnterpriseList = computed(() => {
    // 如果没有搜索词，显示 entList
    if (!searchKeyword.value) {
        return entList.value;
    }

    // 在 entList 中模糊匹配
    const matchedInEntList = entList.value.filter((item) => item.businessName?.includes(searchKeyword.value));

    // 如果 entList 中有匹配项，只显示匹配项
    if (matchedInEntList.length > 0) {
        return matchedInEntList;
    }

    // 否则显示从接口获取的 companyList
    return companyList.value;
});
// 处理中文输入开始事件-1
const handleCompositionStart = () => {
    isComposing.value = true;
};
// 处理中文输入结束事件-2
const handleCompositionEnd = (e: any) => {
    isComposing.value = false;
    filterCompany(e.target.value);
};
// 企业搜索方法-3（带节流）
const filterCompany = throttle(async (query: string) => {
    searchKeyword.value = query;

    // 中文输入中、或输入太短，只做本地过滤，不调用远程接口
    if (isComposing.value || !query || query.length <= 3) {
        companyList.value = [];
        return;
    }

    // 检查 entList 中是否有匹配项
    const matchedInEntList = entList.value.filter((item) => item.businessName?.includes(query));

    // 如果 entList 中有匹配，直接显示过滤后的列表
    if (matchedInEntList.length > 0) {
        companyList.value = [];
        return;
    }

    // 如果 entList 中没有匹配，调用接口查询
    selectLoading.value = true;
    try {
        const { data } = await getInfoByBusinessName({ companyName: query });
        companyList.value =
            data?.map((item: any) => ({
                unifiedSocialCreditCode: item.creditCode,
                businessName: item.companyName,
            })) || [];
    } catch (error) {
        companyList.value = [];
    } finally {
        selectLoading.value = false;
    }
}, 300);
//根据企业ecode获取企业信息
const changeCompany = (company: string) => {
    if (company) {
        const ecode = displayEnterpriseList.value.find((item) => item.businessName == company)?.unifiedSocialCreditCode || '';
        ecodeDisabled.value = !!ecode;
        ruleForm.value.unifiedSocialCreditCode = ecode || '';
    } else {
        // 清空选择时，重置相关字段
        ecodeDisabled.value = false;
        ruleForm.value.businessName = '';
        ruleForm.value.unifiedSocialCreditCode = '';
    }
};
// 获取录入企业信息
const getEntryEnt = async () => {
    try {
        const { code, msg, data } = await getSimpleList();
        if (code !== 200) return Elmessage.error(msg || '获取录入企业失败');
        entList.value = data || [];
    } catch (error: any) {
        Elmessage.error(error?.msg || '获取录入企业失败');
    }
};
onMounted(() => {
    getEntryEnt();
});