可以输入的下拉框（下拉框数据过大，页面卡死）

项目场景：

提示：这里简述项目相关背景：

在项目中，有些下拉框的数据过于庞大，这样页面有时候会卡死，在vue3中常用的组件库element-puls中有个组件可以避免

在项目中，有些需求要求下拉框选择的同时，可以输入模糊搜索，而且还要求在搜索不到的时候，可以自己手动输入。在vue3中常用的组件库element-puls中同样的，还是这个组件可以做到

模糊搜索，从服务器获取数据

---

解决方案：

提示：这里填写该问题的具体解决方案：

1：组件

<template>
  <el-select-v2
    v-model="modelValue"
    ref="selectRef"
    :placeholder="props.placeholder"
    :options="options"
    allow-create
    filterable
    remote
    clearable
    :disabled="props.disabled"
    :remote-method="emitUpdateModelValue"
  >
    <template #empty>
      {{ props.emptyPlaceholder }}
    </template>
  </el-select-v2>
</template>
<script lang="ts" setup>
import {getEmil} from "@/api/system/user";

const modelValue = ref()
const emit = defineEmits(['onChange'])
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
  },
  emptyPlaceholder: {
    type: String
  },
  userType:{
    type:Boolean,
    default:false,
  }
})

const emitUpdateModelValue = async (query: string) => {
  if (query) {
    setTimeout(async () => {
      const result = await getEmil({
        userType:props.userType,
        keyword:query
      })
      options.value = result.map((item) => {
        return {
          label: `${item.nickname} (${item.email})`,//昵称加邮箱
          value: `${item.email}`,//主键id
          username: `${item.username}`,//工号
          email: `${item.email}`,//邮箱
          nickname: `${item.nickname}`,//昵称
        }
      })
    }, 200)
  } else {
    options.value = []
  }
}

const options = ref<{
  label: string,
  value: string
}[]>([])

</script>
<style scoped>

</style>

2：使用

<InputSelect
    :userType="false"
    clearable
    v-model="formData.personnelEmail"
    placeholder="请选择或输入" />



import InputSelect from "@/views/components/searchEmail.vue";