vue实现tree组件增删改,
本文主要介绍Vue使用el-tree懒加载进行添加、删除和检查，以懒加载的形式展现。根据需要，目录有新的编辑和删除操作，以及操作后刷新的树形结构。让我们来看看边肖的具体实现代码。
vue的树形显示应用于项目：以树形的形式异步显示。
先展示效果：
找到element-ui的官方文档，el-tree。(地址：https://element.eleme.cn/#/zh-CN/component/tree)
需求：以懒加载的形式展现。根据需求，目录新增了编辑和删除操作，并在操作后刷新了树结构。
让我们现在开始。
一、
懒惰加载：树的懒惰加载，由一个属性控制：懒惰。使用lazy，您需要使用load来加载数据以呈现树。
原理：初始化触发加载函数先加载初始数据，然后点击一个节点触发加载函数加载该节点下的子节点。
优点：适用于大数据量，刷新部分节点友好。
二、
用户自定义节点：在节点后添加动作按钮。
简单的例子官网有例子。
**
主要说说更新节点。
**当对节点进行编辑、删除时，需要更新树，只需更新节点，不必更新全部的树即可。原理:更新节点。其实更新的节点是该节点的子节点，不包括这个节点。删除该节点的子节点，重新请求数据，获取该节点的子节点数据，进行重新渲染。
//refreshNode:要刷新的节点；NewNodeData:新的子节点数据
refreshNode.splice(0，refresh node . length)；
refresh node . docreate children(new nodedata)；
了解：
1.方法node-click调用函数menuNodeClick来记录被点击的节点信息。在节点上操作之前，必须先单击选择一个节点。该函数监视节点点击事件，一旦节点被点击，它将触发：
menuNodeClick(数据，节点，树节点){
this.selectNodeData=data
this.selectNode=node
}
2.您可以在节点操作后刷新节点。可以选择通过不同的场景刷新本节点(node)或者本节点的父节点(node.parent):
/**
*刷新节点数据
* @node [node/Object]:刷新节点，刷新节点下的所有节点。
* @ type [string]:节点的类型，‘Node’表示Node是树的节点信息节点；“数据”表示节点是树节点信息中的数据。
*/
refreshTreeNode(节点，类型){
让refreshNode
//获取要更新的节点的子节点
if(type===node) {
refreshNode=节点.子节点
}else if(type===data) {
让getNode=this。$refs.tree.getNode(node)
refreshNode=getNode.childNodes
}
//删除原来的子节点
refreshNode.splice(0，refresh node . length)；
//重新请求数据并更新节点
this.requestTreeNode(节点)
}
3.选中复选框复选框：
如果在懒加载中有选择框，需要用选择框加载数据，然后通过属性default-checked-keys检查，通过default-expanded-keys设置展开的节点。
4.单项选择：
如果延迟加载只有一个选项，可以选择设置：
//设置当前要选择的节点
这个。$refs.tree.setCurrentKey(
this . selectnodedata[this . node key]
)
不管是单选还是多选，第一次加载时，后台不仅会给你选中的信息，还会给你节点所在分支的所有节点信息，并赋给default-expanded-keys，这样节点所在分支就可以自上而下展开。但往往后台可能给出的只是选中值的信息，需要前端自己封装数据，获取需要扩展的分支信息。根据不同的数据格式，使用不同的方法。
1)树形单层数据格式：
[
{.},
{.},
{.}
]
对于这种格式的数据，可以同时满足【点击一个图层加载一个图层】和【点击一个图层加载被点击图层的多个子节点】。第一种不需要数据处理；第二种情况，需要在每条数据中注入一个字段关联父节点和子节点，然后将数据封装成el-tree要求的格式，用递归函数将数据整合(假设关联字段为parentId，nodeKey为Id，树的子节点字段为children，需要加载id为 n )的多级子节点(注意：递归函数会影响性能，要小心)
2).多层数据(假设子节点的属性名是children)
[
{
.
儿童：[
{
.
儿童：[
{
.
儿童：[.],
},
{
.
儿童：[.],
}
]
},
{
.
儿童：[
{
.
儿童：[.],
}
]
}
]
}
]
这种格式的数据在单层和多层都可以满足，不需要任何处理。
选择要整合的值，并展开所选值所在的树：对于多层数据，可以由背景给出所选节点所在的整个分支的值，分配给default-expanded-keys进行展开。也可以自己筛选，写一个递归函数，循环遍历多层数据，找到所选值的节点的分支设置展开(假设nodeKey是id，树的子节点字段是children，需要展开id为 n 的节点所在的整个分支)
延迟加载的示例：
HTML控件：
el树
:data=treeData
:props=defaultProps
:load=loadNodeTree
@node-click=handleNodeClick
懒惰的
:expand-on-click-node=false
:default-expanded-keys=[1]
node-key=id
:highlight-current=true
span class= custom-tree-node slot-scope= { node，data }
span class= tree left { node . label } }/span
treeRight
我
v-if=node.level===1
@click=()=appendNode(node，data)
el-icon-plus
style=color: blue
/i
！-添加分组-
！-不需要删除和重命名根节点-
我
v-if=data.id！==0
@click=()=deleteNode(node，data)
el-icon-delete
style=color: red
/i
！-删除分组-
我
v-if=data.id！==0
@click=()=editNode(node，data)
el-icon-edit
style=color: blue
/i
！-重命名分组-
/span
/span
/el-tree
vue:
数据定义变量。
//树形菜单
TreeData: []，//树节点
DefaultProps: {//修改el-tree的默认数据数组参数
孩子：“孩子”，
标签:“名称”，
id: id ，
parentId: parentId ，
IsLeaf: leaf //指定该节点是否为叶节点，仅当指定了lazy属性时才生效。
},
方法：
加载树形菜单部分
//加载树数据
loadNodeTree(节点，解析){
const那个=这个
if (node.level===0) {
that.loadtreeData(node，resolve)
} else if (node.level===1) {
that.getChildByList(node，resolve)
}
},
//获取loadtreeData是父节点数据，getChildByList是异步获取子节点数据。
loadtreeData(nodeData，resolve) {
常量数据类型={
pageIndex: 1，
页面大小：100000
}
getAlltype(数据类型)。然后(res={
const rootChildren=[]
if (res.code===200) {
const data=res.data.list
data.map(item={
rootChildren.push({
名称：项目.类型名称
parentId:" "，
id: item.id，
叶子：假的，
儿童：[]
})
})
//如果分解有内容就是懒加载走查询否则走的是修改
如果（解决){
解析（根孩子)
}否则{
nodeData.childNodes=[]
nodedata。文档创建子项(根子项)
}
}否则{
解析([])
}
})
},
//获取子节点请求
getChildByList(nodeData，resolve) {
var _parentID=nodeData.data.id
const typeSpec={
typeId: _parentID，
pageIndex: 1，
页面大小：100000
}
getAlltypeSpec(typeSpec).然后(res={
const rootChildren=[]
if (res.code===200) {
const data=res.data.list
data.map(item={
rootChildren.push({
名称：项目。描述，
parentId: item.typeId，
id: item.id，
叶子：没错，
儿童：[]
})
})
如果（解决){
解析（根孩子)
}否则{
nodeData.childNodes=[]
nodedata。文档创建子项(根子项)
}
}否则{
返回错误的
}
}).接住(错误={
console.log(错误)
})
},
//节点点击事件
handleNodeClick(数据，节点){
this.addnode=node
this.adddata=data
if (node.level===1) {
这个。查询表单。typeid=节点。数据。编号
this.queryForm.typeSpecId=
} else if (node.level===2) {
这个。查询表单。typeid=节点。数据。父编号
这个。查询表单。typespecid=节点。数据。编号
}
this.query()
},
节点操作：增加节点修改节点删除节点（操作自己节点要传父节点信息才能找到自己当前节点，操作子节点就传当前节点结论：父节点操作子节点)
//树节点增加类型规格
appendNode(节点，数据){
this.addTypesSpec={
typeName: node.data.name，
typeId: node.data.id
}
this.createTypesSpecDialog=true
},
//树类型修改
编辑节点(节点，数据){
const typeId=node.data.parentId
//一级类型
if (node.level===1) {
this.editTypesDialog=true
this.editTypes={
id: node.data.id，
typeName: node.data.name
}
}否则{
this.editTypesSpecDialog=true
this.getSelectTypes()
//这个。edittypesspec=object。赋值({ }，node.data)
this.editTypesSpec={
typeId: typeId，
id: node.data.id，
描述：节点。数据。名称
}
}
},
//树类型删除
删除节点(节点，数据){
//一级类型
if (node.level===1) {
这个. msgbox.confirm(此操作将删除资产类型数据，是否继续？, 删除提示, {
confirmButtonText:确定，
取消按钮文本： 取消，
类型："警告"
}).然后(()={
typeDel(node.data.id).然后（
resp={
这个. $消息(删除成功)
this.query()
this.loadNodeTree(node.parent)
},
错误={
console.log(err ，err)
}
)
}).catch(()={
这个message.error(已取消)
})
}否则{
这个. msgbox.confirm(此操作将删除资产类型规格数据，是否继续？, 删除提示, {
confirmButtonText:确定，
取消按钮文本： 取消，
类型："警告"
}).然后(()={
typeSpecDel(node.data.id).然后（
resp={
this.loadNodeTree(node.parent)
这个。$message(“成功删除”)
this.query()
},
错误={
console.log(err ，err)
}
)
}).catch(()={
这个。$ message . error( canceled )
})
}
},
节点被触发后，会显示弹出框，经过正常的弹出框，增加修改和删除。但是后台请求提交后，返回操作成功，需要重新加载树形结构。所以这里再次调用load tree方法，触发并点击树就可以保存上传的节点。我的方法是handleNodeClick，不管是否点击修改、添加、删除，都保存被点击的节点。
这个。$message(“编辑成功”)
this . loadnodetree(this . add node . parent)
1.设置膨胀和收缩
如果(！node.expanded) {
node . expand()；
}否则{
node . collapse()；
}
2.获取父节点
节点.父节点
如果能看懂，可以看看。代码是可以优化的，但是最近看不懂，这个逻辑你看得懂。下次见。
关于Vue使用el-tree懒加载进行添加、删除和检查的这篇文章到此为止。关于Vue el-tree惰性加载的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。