vue3 解决el-select加上filterable， 无数据设置no-data-text="暂无数据"失效问题 使用setup方式完整代码

下面是一个使用 Vue 3 的 `setup` 函数来解决 `el-select` 组件 `filterable` 和 `no-data-text` 属性的问题的示例代码：

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

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const selected = ref('');
    const options = ref([]);
    const loading = ref(false);
    const noDataText = ref('暂无数据');

    const fetchData = (query) => {
      loading.value = true;

      axios.get(`/api/options?q=${query}`).then((res) => {
        options.value = res.data;
        loading.value = false;

        if (options.value.length === 0) {
          noDataText.value = '无匹配数据';
        }
      });
    };

    return {
      selected,
      options,
      loading,
      noDataText,
      fetchData,
    };
  },
};
</script>

在这个示例代码中，我们使用了 `ref` 函数来创建可响应的变量，在 `setup` 函数中定义了 `selected`、`options`、`loading`、`noDataText`、`fetchData` 这些变量和函数。

在模板中，我们将 `el-select` 组件的 `filterable` 属性设置为 `true`，并将 `no-data-text` 属性绑定到 `noDataText` 变量上。我们还通过 `:loading` 属性来控制显示加载状态的图标，通过 `:remote-method` 属性来设置获取远程数据的方法。

在 `fetchData` 函数中，我们使用 axios 库发送异步请求获取选项数据，然后根据获取到的数据动态更新 `options` 和 `noDataText` 变量。当 `options` 数组为空时，我们将 `noDataText` 变量设置为 `'无匹配数据'`。

这样就可以在 Vue 3 中使用 `setup` 函数来解决 `el-select` 组件 `filterable` 和 `no-data-text` 属性的问题了。