万物归元：element树形控件小坑

踩坑日记——element ui树形控件

element ui是一个非常优秀的组件库，但它也不可避免地有一些坑。最近在做一个管理系统，页面左侧需要一个目录树，便于文件的操作。不想从头开始造轮子，于是就考虑采用iview或者element的tree。调研后发现iview的tree还是有点局限，没有拖拽移动功能，没有懒加载子目录的功能等等，而element则比较符合我们的需求。

踩坑历程

虽然element的tree功能比较齐全，但是坑也是有点的。

• 坑一：懒加载子目录不生效

在使用element的tree时，我遇到了一个坑，就是懒加载子目录不生效。这个问题困扰了我好久，后来才发现是少了如下代码：

<el-tree
  :data="data"
  :load="loadData"
  node-key="id"
  lazy
  highlight-current
>
</el-tree>

原来，想要使用懒加载子目录，必须在<el-tree>组件上添加lazy属性。

• 坑二：拖拽移动失效

在使用element的tree时，我还遇到了另一个坑，就是拖拽移动失效。这个问题也困扰了我好久，后来才发现是少了如下代码：

<el-tree
  :data="data"
  :props="defaultProps"
  node-key="id"
  draggable
  allow-drop
  @node-drop="handleDrop"
>
</el-tree>

原来，想要使用拖拽移动，必须在<el-tree>组件上添加draggable和allow-drop属性，并在<el-tree>组件上监听node-drop事件。

• 坑三：节点展开后无法收起

在使用element的tree时，我还遇到了另一个坑，就是节点展开后无法收起。这个问题也困扰了我好久，后来才发现是少了如下代码：

<el-tree
  :data="data"
  :props="defaultProps"
  node-key="id"
  accordion
>
</el-tree>

原来，想要让节点展开后无法收起，必须在<el-tree>组件上添加accordion属性。

使用心得

除了上述几个坑之外，element的tree还是非常好用的。它有很多优点，比如：

• 功能齐全，支持懒加载子目录、拖拽移动、节点展开后无法收起等功能。
• 样式美观，与element ui的其他组件风格一致。
• 文档齐全，有详细的中文文档和示例。

总结

element的tree是一个非常优秀的组件，但它也有一些坑。在使用element的tree时，需要特别注意上述几个坑。只要避开这些坑，element的tree就可以帮助我们轻松构建出美观、实用的树形控件。