el-autocomplete 去重
时间: 2024-12-30 17:32:57 浏览: 8
### 解决Element UI `el-autocomplete` 组件中的数据去重
为了确保 `el-autocomplete` 提供的建议列表不包含重复项,在处理服务器响应或本地数据源时可以引入一个过滤函数来移除重复条目。具体方法是在获取到原始数据之后,通过 JavaScript 的 Set 结构或者数组操作方法去除冗余。
#### 方法一:利用Set结构自动去重
当从远程接口获取数据并准备传递给 `fetch-suggestions` 属性指定的方法前,先将结果转换成 Set 对象再转回 Array 类型:
```javascript
// 假设这是来自API调用的结果
let rawSuggestions = [
{ "value": "Apple", "address": "..."},
{"value":"Banana","address":"..."},
{"value":"Apple","address":"different address"}
];
function uniqueByKey(array, key){
return [...new Map(array.map(item => [item[key], item])).values()];
}
const processedData = uniqueByKey(rawSuggestions,'value');
console.log(processedData); // 输出已去重后的对象数组
```
此代码片段定义了一个辅助函数 `uniqueByKey()` 来基于特定键(这里是"value"字段)对数组元素进行唯一化处理[^1]。
#### 方法二:自定义比较逻辑的手动筛选
如果需要更复杂的匹配条件,则可以在遍历过程中手动判断是否已经存在相同的项目,并构建新的无重复版本的数据集:
```javascript
function deduplicateArray(arr) {
const seenValues = new Set();
return arr.filter((item) => !seenValues.has(item.value.toLowerCase()) && seenValues.add(item.value.toLowerCase()));
}
```
上述例子展示了如何创建一个新的集合用于追踪之前遇到过的值;每当发现新成员时不区分大小写地检查它是否已经被记录过——如果没有则加入最终返回的新数组中。
最后一步就是把经过清理的数据传入组件的相关属性里,比如上面提到的例子可以直接替换掉默认的 suggestions 列表作为参数提供给 `querySearch` 函数使用。
阅读全文