ElementUI_树型控件

最新推荐文章于 2025-03-11 14:17:15 发布

dayan0202

最新推荐文章于 2025-03-11 14:17:15 发布

阅读量3.3k

点赞数

分类专栏：经验之谈文章标签： vue.js elementUi vue ui 前端

本文链接：https://blog.youkuaiyun.com/dayan0202/article/details/107138756

版权

本文详细介绍了如何在ElementUI中实现树形控件的高级功能，包括自定义过滤方法以展开多级搜索，隐藏树形节点的小三角图标，以及自定义树形节点的图标。内容涵盖filterNode方法的优化，确保搜索关键字出现在任意层级时都能展开匹配节点，以及通过CSS样式控制树形结构的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于ElementUI，参考ElementUI官网
主要记录Tree的几个小技巧！！！！！！！！观察树形引用时代码结构：

 <el-input placeholder="输入搜索关键字"    v-model="filterText"/>

  <el-tree
                :data="apiMenus"
                :props="defaultProps"
                :filter-node-method="filterNode"
                 ref="tree"
                 node-key="id"
                :default-expanded-keys="['0']"
                @node-click="handleNodeClick"
                :render-content="renderContent" />

1. 树形菜单检索信息并自动展开

在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为