el-tree 过滤不区分字母大小写

最新推荐文章于 2026-06-24 15:29:44 发布

原创最新推荐文章于 2026-06-24 15:29:44 发布 · 1.2k 阅读

本内容遵循CC 4.0 BY-SA版权协议

文章介绍了在使用el-tree组件时如何实现过滤功能并确保不区分字母大小写。原有的filter-node-method方法可能导致全大写或全小写的匹配，但无法处理大小写混合的情况。解决方案是将输入值和数据都转换为小写再进行比较，确保一致性和全面的匹配性。

el-tree 过滤不区分字母大小写

<el-tree empty-text="请切换"  @check-change="alltreecheckclick" :data="lefttreeDed" ref="treeIn"
        highlight-current :show-checkbox="true" class="left-tree" :props="defaultProps" node-key="sid"
        :filter-node-method="filterNode" >

这上面其他的属性暂时不需要，需要的就是这个:filter-node-method=“filterNode”，自定义过滤函数
之前是搜索了一下看别人是这么写的

filterNode (value, data) {
      if (!value) return true;
      return (data[this.defaultProps.label].indexOf(value.toUpperCase()) !== -1 || data[this.defaultProps.label].indexOf(value.toLowerCase()) !== -1);
    },

原本也没什么问题，就是把输入的进行大小写转换，两次匹配
但是后来使用的过程中发现，这种只会进行全大写和全小写的匹配，而不会进行大小写混写的匹配
比如我输入Tr，这里面匹配的就是TR和tr，但是如果真正的数据里就是Tr，那么这样是匹配不到的
但是可以改成这样

filterNode (value, data) {
      if (!value) return true;
      let nowval = data[this.defaultProps.label].toUpperCase()
      return (nowval.indexOf(value.toUpperCase()) !== -1);
    },

转换一下思路就行了，把输入的转小写，把需要匹配的也转小写，这样就全同了，保证前后一致即可，这样输入tr,TR,Tr，tR都可以匹配到

标签