Element UI Input 模糊查询：实现快速筛选功能

"Element UI Input 模糊查询：实现快速筛选功能"\n\nElement UI 提供了一个模糊查询的 input 组件，可以通过设置 `filterable` 属性来开启模糊查询功能。\n\nhtml\n<template>\n <el-input\n v-model="keyword"\n :filterable="true"\n :remote-method="remoteMethod"\n placeholder="请输入关键字"\n ></el-input>\n</template>\n\n<script>\n export default {\n data() {\n return {\n keyword: ''\n };\n },\n methods: {\n remoteMethod(query) {\n // 在这里可以调用接口或者从数据源中进行模糊查询\n // 将查询结果赋值给一个数组，并将该数组赋值给element-ui的下拉选项\n // 例如：\n const options = ['apple', 'banana', 'orange'];\n const results = options.filter(option =>\n option.toLowerCase().includes(query.toLowerCase())\n );\n this.$nextTick(() => {\n this.$refs.input.$refs.input.$refs.input.setCurrentValue(query);\n this.$refs.input.$refs.input.$refs.input.$emit('input');\n });\n this.$refs.input.filteredOptions = results;\n }\n }\n };\n</script>\n\n\n在上面的例子中，`filterable` 属性被设置为 `true`，开启了模糊查询功能。`remote-method` 是一个方法，用于处理输入框的输入变化并进行模糊查询操作。在 `remoteMethod` 方法中，可以调用接口或者从数据源中进行模糊查询，并将查询结果赋值给一个数组。最后，通过 `this.$refs.input.filteredOptions` 将查询结果赋值给 element-ui 的下拉选项。\n\n需要注意的是，为了在输入框中显示用户输入的关键字，需要通过 `this.$refs.input.$refs.input.$refs.input.setCurrentValue(query)` 设置输入框的值，并通过 `this.$refs.input.$refs.input.$refs.input.$emit('input')` 手动触发 input 事件，以便更新输入框的显示。