vue+Element tree 组件 懒加载、节点鼠标事件,上下移动,动态懒加载

桃花溜溜落笔红,粉黛春色流香盒。

前言:温故而知新  予人玫瑰 

①、懒加载

具体功能说明详见官网 

官网:https://element.faas.ele.me/#/zh-CN/component/tree   

vue+Element tree 组件 懒加载、节点鼠标事件,上下移动,动态懒加载_第1张图片

图中loadNode的方法:

加深理解请结合官网。结合后台实现tree组件的懒加载,不明白的可以留言给我。

(至此懒加载完全实现)

vue+Element tree 组件 懒加载、节点鼠标事件,上下移动,动态懒加载_第2张图片

②、节点鼠标事件

需求说明:鼠标移动tree组件的节点上,显示节点尾部的内容(一般是操作按钮)


vue+Element tree 组件 懒加载、节点鼠标事件,上下移动,动态懒加载_第3张图片

具体实现如下:

vue+Element tree 组件 懒加载、节点鼠标事件,上下移动,动态懒加载_第4张图片
vue+Element tree 组件 懒加载、节点鼠标事件,上下移动,动态懒加载_第5张图片
这里

这里,我建议大家使用scoped slot来定义节点内容,相对于render-content来说简单一些。更容易理解。到这一个节点的鼠标事件完成。

③、上下移动

亲测有效。

https://www.jianshu.com/p/a317d8a6e77c

④:动态 懒加载

亲测有效

https://www.jianshu.com/p/7f4c6686b755

大家结合后台数据不怎么会实现这些功能的,请留言给我,我会帮助大家寻找解决问题的方法。

你可能感兴趣的:(vue+Element tree 组件 懒加载、节点鼠标事件,上下移动,动态懒加载)