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




相关文章
|
28天前
|
Linux C# Android开发
分享3款开源、免费的Avalonia UI控件库
分享3款开源、免费的Avalonia UI控件库
|
2月前
|
搜索推荐 前端开发 C#
推荐7款美观且功能强大的WPF UI库
推荐7款美观且功能强大的WPF UI库
|
3月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
|
3月前
|
图形学
小功能⭐️Unity获取点击到的UI
小功能⭐️Unity获取点击到的UI
|
3月前
|
图形学
小功能⭐️Unity判断是否单击到了UI
小功能⭐️Unity判断是否单击到了UI
|
3月前
|
图形学
小功能⭐️不用传参,Unity获得鼠标悬浮处的物体、UI!
小功能⭐️不用传参,Unity获得鼠标悬浮处的物体、UI!
|
3月前
|
图形学
小功能⭐️解决Unity 3D UI遮挡穿透问题
小功能⭐️解决Unity 3D UI遮挡穿透问题
|
3月前
|
JavaScript 前端开发 Shell
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
60 0
|
5月前
|
前端开发 JavaScript Java
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
43 1
|
4月前
|
C# Windows
一款开源、免费、现代化风格的WPF UI控件库
一款开源、免费、现代化风格的WPF UI控件库
140 0