这篇文章主要介绍了Vue使用el-tree 懒加载进行增删改查,以懒加载的形式展示，目录根据需求需要有新增 编辑 删除 操作以及操作后的刷新树结构，具体实现代码跟随小编一起看看吧
关于vue的树形展示 使用到项目：以树的形式异步展现
效果图先放：
找到element-ui的官方文档，el-tree。（地址：https://element.eleme.cn/#/zh-CN/component/tree ）
项目需求：以懒加载的形式展示，目录根据需求需要有新增 编辑 删除 操作以及操作后的刷新树结构
那我们现在开始吧
一、
懒加载：Tree的懒加载，用一个属性控制：lazy。使用lazy，就要使用load来加载数据进行渲染树
原理：初始化触发load函数先加载初始数据，通过点击某个节点，触发load函数，来加载这个节点下的子节点。
优点：适合数据量比较大的时候，对部分节点刷新也比较友好
二、
自定义节点：节点后添加操作按钮
简单例子官网上就有示例
**
主要讲讲更新节点
**
当对节点进行编辑、删除时，需要更新树，只需更新节点，不必更新全部的树即可。
原理：更新节点，其实更新的是该节点的子节点，不包括本节点。删除该节点的子节点，重新请求数据获取本节点的子节点数据进行重新渲染。
// refreshNode:要刷新的节点；newNodeData:新的子节点数据 refreshNode.splice(0, refreshNode.length); refreshNode.doCreateChildren(newNodeData);
理解一下：
1>.方法node-click调用函数menuNodeClick，记录点击的节点信息，对节点操作前，必然先点击选中某个节点。此函数监听点击节点事件，只要点击了节点，就触发：
menuNodeClick(data, node, treeNode) { this.selectNodeData = data this.selectNode = node }
2>.节点操作后刷新节点即可，通过不同场景可以选择刷新本节点（node）还是刷新本节点的父节点(node.parent)：
/** * 刷新节点数据 * @node [node/Object]: 刷新的节点node，刷新node以下的所有节点 * @type [String]: node的类型，'node'表示node是树的节点信息Node;'data'表示node是树节点信息中的data数据 */ refreshTreeNode(node, type) { let refreshNode; // 拿到要更新节点的子节点 if(type === 'node') { refreshNode = node.childNodes }else if(type === 'data') { let getNode = this.$refs.tree.getNode(node) refreshNode = getNode.childNodes } // 删除原有的子节点 refreshNode.splice(0, refreshNode.length); //重新请求数据，更新节点 this.requestTreeNode(node) }
3.选择框checkBox：
如果懒加载中，有选择框，需要将有选择框的数据加载出来，然后通过属性default-checked-keys来勾选，通过default-expanded-keys设置展开的节点。
4.单选：
如果在懒加载中，有单选项，则设置选中即可：
// 设置当前节点选中 this.$refs.tree.setCurrentKey( this.selectNodeData[this.nodeKey] )
不管是单选还是多选，在第一次加载时，后台要给的，不只是选中信息，还需要选中节点所在分支的所有节点信息，赋值给default-expanded-keys以便可使节点所在分支从上到选择项都展开。但往往，后台可能给的，只是选中值的信息，这就要前端自己封装数据，获取需要展开的分支信本文来源gaodaimacom搞#^代%!码&网(息。根据数据格式不同，用不同的方法
1）树形单层数据格式：
[
{…},
{…},
{…}
]
这种格式的数据，【点击一层，加载一层】、【点击一层，加载该点击层的多层子节点】两种情况都可以满足。第一种不需要进行数据处理；第二种情况，需要在每条数据中注入一个字段，用来关联父子节点，然后将数据封装处理成el-tree所需要的格式，用一个递归函数整合数据（假设关联字段为parentId，nodeKey为id，树的子节点字段为children，需要加载id为’N’的多层子节点）（注：递归函数会影响性能，谨慎使用）
2).多层数据（假设子节点的属性名是children）
[ { ..., children: [ { ..., children: [ { ..., children: [...], }, { ..., children: [...], } ] }, { ..., children: [ { ..., children: [...], } ] } ] } ]
这种格式的数据，单层、多层都可以满足，不需要做处理。
选中值整合并展开选中值所在的树：多层数据可由后台给出选中节点所在的整个分支的值，赋给default-expanded-keys进行展开。也可以自己做筛选，写一个递归函数，将多层数据循环，找到选中值的节点的分支来设置展开（假设nodeKey为id，树的子节点字段为children，需要展开id为’N’的节点所在的整个分支）
懒加载示例：
HTML控件:
<span class="custom-tree-node"> <span class="treeLeft">{{ node.label }}</span><span class="treeRight"> <i> appendNode(node, data)" class="el-icon-plus" style="color: blue"></i><!--增加分组--><!-- 根节点不需要删除和重命名 --><i> deleteNode(node, data)" class="el-icon-delete" style="color: red"></i><!--删除分组--><i> editNode(node, data)" class="el-icon-edit" style="color: blue"></i><!--重命名分组--></span></span>
vue:
data里面定义变量
// 树形菜单 treeData: [], // 树节点 defaultProps: { // 修改el-tree默认data数组参数 children: 'children', label: 'name', id: 'id', parentId: 'parentId', isLeaf: 'leaf' // 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 },
methods：
加载树形菜单部分
// 加载 树数据 loadNodeTree(node, resolve) { const that = this if (node.level === 0) { that.loadtreeData(node, resolve) } else if (node.level === 1) { that.getChildByList(node, resolve) } }, //
以上就是Vue使用el-tree 懒加载进行增删改查功能的实现的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue使用el-tree 懒加载进行增删改查功能的实现 
