Element-ui 中树形控件(Tree)实现增删改功能

简介: Element-ui 中树形控件(Tree)实现增删改功能

本文所有案例代码地址 如果觉得有帮助,别忘了点亮 star 哦

案例一

image.gif

  • 因为需求是只写三级,所以控制了只有三级,你们可以根据自己需求来写N级;
  • 新增同级和新增下级这个地方,同级是
this.$refs.tree.append(treeD, this.currentNode.parent); 

下级是

this.$refs.tree.append(treeD, this.currentNode);
  • 点击弹出增删改方法,用的是 el-dropdown 这个地方最好是用点击的,因为需要先点击才能触发 handleLeftclick() 这个方法,不然是获取不到节点信息的;

案例二(增加修改删除上下移动)

image.gif

案例三(scoped slot)

image.gif

案例四(render-content)

20210505124832746.gif




相关文章
|
24天前
「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现
本篇将带领你实现一个倒计时和提醒功能的应用,用户可以设置倒计时时间并开始计时。当倒计时结束时,应用会显示提醒。该项目涉及时间控制、状态管理和用户交互,是学习鸿蒙应用开发的绝佳实践项目。
68 2
「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现
|
1月前
|
人工智能 API Apache
推荐3款开源、美观且免费的WinForm UI控件库
推荐3款开源、美观且免费的WinForm UI控件库
122 6
|
1月前
|
API C# 开发者
基于Material Design风格开源、免费的WinForms UI控件库
基于Material Design风格开源、免费的WinForms UI控件库!
|
2月前
|
Linux C# Android开发
分享3款开源、免费的Avalonia UI控件库
分享3款开源、免费的Avalonia UI控件库
230 0
|
3月前
|
搜索推荐 前端开发 C#
推荐7款美观且功能强大的WPF UI库
推荐7款美观且功能强大的WPF UI库
145 2
|
4月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
113 1
|
4月前
|
图形学
小功能⭐️Unity获取点击到的UI
小功能⭐️Unity获取点击到的UI
|
4月前
|
图形学
小功能⭐️Unity判断是否单击到了UI
小功能⭐️Unity判断是否单击到了UI
|
4月前
|
图形学
小功能⭐️不用传参,Unity获得鼠标悬浮处的物体、UI!
小功能⭐️不用传参,Unity获得鼠标悬浮处的物体、UI!
|
4月前
|
图形学
小功能⭐️解决Unity 3D UI遮挡穿透问题
小功能⭐️解决Unity 3D UI遮挡穿透问题