vue3 + element Plus实现select远程搜索

1. 引入element中的select选择器

<el-select
    v-model="params.q"
    filterable
    remote
    :reserve-keyword="false"
    placeholder="请输入关键字"
    clearable
    :remote-method="remoteMethod"
    :loading="loading"
    style="width: 240px"
      >
      <el-option
         v-for="item in options"
         :key="item.value"
         :label="item.label"
         :value="item.value"
       />
</el-select>

2. 在js中设置通过输入关键字以从远程服务器中查找数据

const options = ref<ListItem[]>([]);  //select下拉数据
const loading = ref(false);    //获取数据时加载状态
let selectData = [];         //存储接口获取的数据

//这里是请求所需的参数
const variables = ref({
  first: 0,
  pageSize: 1000,
  q: "",
});

//remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值
const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true;
    variables.value.q = query;
    //我这里使用了graphql请求，只需要将请求获取的数据赋值给selectData
    const { refetch, onResult } = useQuery(queryProjectImage, variables, {
      fetchPolicy: "no-cache",
    });
    onResult((res) => {
      loading.value = false;
      selectData = res.data?.QueryProjectImage.data;
      //这里将数据重组
      options.value = selectData.map((item) => ({
        value: `${item.mpImage.id}`,
        label: `${item.filename}`,
      }));
    });
  } else {
    options.value = [];
  }
};

//这里是需要传给父组件的数据来进行搜素
const params: SampleSearch = reactive({
  q: "",
  date: undefined,
  setType: undefined,
  status: undefined,
});

const emit = defineEmits(["onQuery"]);

const onSubmit = () => {
  emit("onQuery", params);
  console.log(params);
};

defineExpose({ onSubmit });

3. 功能实现如下：