element-ui el-tree 筛选显示子节点

element-ui文档内提供的节点过滤方法,如果搜索父级节点是无法显示子节点的,实际使用中,我们需要搜索父节点然后展开选择子节点,官方文档内没有参数能实现这一功能。


element-ui 官方文档截图

如果要实现该功能,就需要通过官方提供的filterNode方法实现自定义过滤效果。

通过官方文档可见filterNode方法包含3个参数(value, data, node),然后打印node参数可见可以获取到父级node。此时我们的逻辑就是在筛选方法中,不仅比对自身的数据是否匹配,也要和父级、父级的父级、等判断是否匹配,如果是无极树,此时就要用到递归。

不过如果递归去一层一层includes或者indexOf去判断,效率太低,所以把里可以先递归把要筛选的关键字拼接起来,然后去对吧这个拼接后的字符串。


如上图,getParent递归方法便可把自身到父级、父级的父级、等需要筛选的字段拼接成字符串,然后筛选方法内去判断显示隐藏,这样就能实现搜索父级关键字,显示子元素的效果。

你可能感兴趣的:(element-ui el-tree 筛选显示子节点)