vue2中el-cascader 单选使用filterable搜索有重复的展示一个即可

在 Vue2 中，`el-cascader` 是 Element UI 提供的一个下拉级联选择组件，用于实现层级数据的选择。如果想要在设置 `filterable` 搜索功能时，遇到重复选项只显示一个，可以采取以下步骤：

1. **初始化组件**: 首先，在组件的配置中开启 `filterable` 属性，并传递一个筛选函数，该函数会在用户输入时过滤数据列表。

<el-cascader
  :options="options"
  filterable
  :remote-filter="remoteFilter"
/>

2. **remoteFilter 函数**: 这是一个处理远程搜索的数据过滤函数，你可以在这里对数据进行去重处理。当搜索结果中有重复项时，保留第一个匹配的项。示例如下：

data() {
  return {
    options: [],
    // 添加一个临时变量存储已经查找过的值
    searchedValues: []
  };
}

methods: {
  remoteFilter(value) {
    const result = this.options.filter(item => {
      if (this.searchedValues.includes(item.value)) {
        return false; // 如果已存在，则返回false，不显示重复项
      }
      // 其他过滤逻辑...
      // 使用item.label 或 item.value 对象进行比较，这里简化为value字段
      return item.value.includes(value);
    });
    this.searchedValues.push(value); // 将当前搜索的值添加到已搜索集合中
    return result;
  }
}

3. **清除重复值**: 可能还需要一个方法来清空 `searchedValues` 当用户关闭搜索框或改变搜索内容，以便下次搜索时从头开始。

methods: {
  clearSearch() {
    this.searchedValues.length = 0;
  }
}

然后，在需要的地方调用 `clearSearch()`。