美文网首页前端开发那些事儿程序员
element-ui el-tree 筛选显示子节点

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

作者: denkloge | 来源:发表于2020-11-13 10:11 被阅读0次

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

    element-ui 官方文档截图

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

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

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

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

    相关文章

      网友评论

        本文标题:element-ui el-tree 筛选显示子节点

        本文链接:https://www.haomeiwen.com/subject/dzhvbktx.html