Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改
(以上,纯属对 https://blog.csdn.net/wxfdpp/article/details/83624460的补充)
(原文链接:https://blog.csdn.net/wxfdpp/article/details/83624460)
![](https://img.haomeiwen.com/i12896826/c5c60105565ce530.png)
我的项目需求是实现鼠标hover上去的时候在对应的树形结构后面显示 添加 修改 和 删除 并实现功能,查看了对应element文档刚好有类似的功能,
![](https://img.haomeiwen.com/i12896826/a3377c65f1f59c1e.png)
![](https://img.haomeiwen.com/i12896826/15650de5041898d1.png)
这个自定义结点内容写的也未免有点太唐突了点…要完成项目需求是远远不够的,再往下找,没有了
当我尝试使用element的自定义结点,给对应的结点添加v-show="false"发现却并没有起作用,怀疑是自己写法错误,找一个案例测了一下,不是我的问题,想起来曾经使用过iview脚手架,也做过类似的操作于是找了出来.修改一下完成了需求
<--这是我的树形控件-->
![](https://img.haomeiwen.com/i12896826/0424d500a02c3763.png)
renderContent 是自定义显示的回掉 绑定的data4是参照element但是我让添加了一个is_show 字段,后来想想可以使用本地中间变量来判断
![](https://img.haomeiwen.com/i12896826/01c885854054391e.png)
![](https://img.haomeiwen.com/i12896826/f8bd5300277e6033.png)
![](https://img.haomeiwen.com/i12896826/2298292b013b06d2.png)
这些工作做完了来看一下效果(数据仅为模拟数据)
![](https://img.haomeiwen.com/i12896826/e3402f8a0f60e0eb.png)
大功告成,添加,修改,和删除就简单了这里就不贴出来了,
另外,在添加鼠标事件的时候还遇到一个问题,比如click事件这样写
![](https://img.haomeiwen.com/i12896826/8517b7c1108355ee.png)
只是补充,以上内容转载 https://blog.csdn.net/wxfdpp/article/details/83624460
网友评论