如何让 vue 在我们在搜索框中输入时动态过滤选项？

Question

我希望 vue 在我们输入时动态过滤搜索框中可用的选项。 到目前为止，它只是显示整个选项列表而没有任何过滤（即使我们输入）。

<el-form-item label="Filename" required>
              <el-select
                v-model="queryform.fileUuid"
                :remote-method="getFilenames"
                :loading="loading"
                filterable
                remote
                reserve-keyword
              >
                <el-option
                  v-for="(item, idx) in filenameOptions"
                  :key="idx"
                  :label="item.filename"
                  :value="item.uuid"
                />
              </el-select>
            </el-form-item>

filenameOptions 已填充并包含以下形式的对象：

{“文件名”：“foo”，“uuid”：“bar”}

以下代码块遵循与前一个块相同的逻辑，按预期工作：

              <el-select
                v-model="form.project"
                :remote-method="getProjects"
                :loading="loading"
                filterable
                remote
                reserve-keyword
              >
                <el-option
                  v-for="(item, idx) in projectOptions"
                  :key="idx"
                  :label="item.key"
                  :value="item.key"
                />

我不知道什么是失败的。 任何见解将不胜感激。

Answer 1

您是否定义了getFilenames方法并且其工作方式类似于远程搜索文档中的示例？ 由于您在el-select元素上定义了:remote-method属性，因此您需要确保提供有效的过滤器 function。

如果您只想根据用户在 select 元素中输入的输入过滤选项标签，您可能会找到过滤 select 元素的选项`cleaner to use。