element UI cascader组件 filter-method实现大小写模糊搜索

最新推荐文章于 2025-04-14 10:55:01 发布

原创最新推荐文章于 2025-04-14 10:55:01 发布 · 6.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

web前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用 Vue 的 el-cascader 组件实现自定义过滤逻辑，通过 dataFilter 方法实现实时按关键词匹配选项，提升用户体验。

采用自定义搜索逻辑filter-method

<el-cascader
          v-model="selectedOptions"
          :options="arrList"
          clearable
          filterable
          :filter-method="dataFilter"
        />

dataFilter(node, val) {
      console.log('val', val, 'node', node)
      if (!!~node.text.indexOf(val) || !!~node.text.toUpperCase().indexOf(val.toUpperCase())) {
        return true
      }
    }