van-cascader实现模糊搜索

Van-Cascader是一个基于Vue.js的树选择组件，它实现了级联选择的效果，常用于多层级的数据筛选。其中的模糊搜索功能允许用户输入部分关键字，然后从选项中匹配并显示包含该关键字的节点。

在Van-Cascader中实现模糊搜索通常会涉及以下几个步骤：

1. **设置数据属性**：在组件初始化时，需要提供一个带有`label`、`value`等字段的节点数组结构，同时指定`optionsFilter`属性，这个属性用于处理搜索函数。

<van-cascader :options="options" :options-filter="filterOptions"></van-cascader>

2. **编写`filterOptions`函数**：这是一个自定义函数，接收用户输入的关键字作为参数，遍历所有节点，通过比较节点的`label`属性与关键词的相似度来进行过滤。常见的做法是使用字符串的`includes()`方法，或者更复杂的正则表达式和文本分析算法。

methods: {
  filterOptions(value, searchKeyword) {
    return options.filter(option => option.label.includes(searchKeyword));
  }
}

3. **触发搜索事件**：当用户输入发生变化时，可以监听`input`或`search`事件，并调用`filterOptions`函数更新显示的结果。

<template>
  <div @input="handleSearch">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  methods: {
    handleSearch(keyword) {
      this.options = this.filterOptions(this.options, keyword);
    },
  },
};
</script>