vue element-plus下拉框输入值时触发接口查询，输入为空时不查

Element Plus 提供的 filterable 属性和 remote 属性来实现

<template>
  <el-select
    v-model="selectedValue"
    filterable
    remote
    :remote-method="fetchData"
    :loading="loading"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [],
      loading: false,
    };
  },
  methods: {
    fetchData(query) {
      // 如果输入为空，则不调用接口
      if (!query) {
        return;
      }
      this.loading = true;
      allLabel({ name: name }).then((res) => {
        if (res.code == 200) {
          this.options = res.data;
          this.loading = false;
    }
  });
    },
  },
};
</script>

filterable 属性允许你在下拉框中输入值，remote 属性表示使用远程搜索。remote-method 属性指定了远程搜索时调用的方法，即 fetchData。在 fetchData 方法中，首先检查输入是否为空，如果为空则不调用接口。如果输入不为空，模拟调用接口并更新下拉框的选项。