软件开发平台软件seo如何优化关键词上首页
1.数据过多时进行懒加载孩子节点，根据层级传参获取后端孩子数据
懒加载主要部分：
1参数:
:load="loadNode"
lazy
:props="defaultProps"
2.defaultProps 需要设置isLeaf: 'isLeaf',去除最后一层孩子节点的展开图表
defaultProps: {
children: 'children',
label: 'label',
isLeaf: 'isLeaf'
},
2.增删改时实现局部刷新
主要思路：将展开的层级的node保存当curNode中，在进行添加刷新后调用partialRefreshpartialRefresh（）方法【下面代码】
partialRefreshpartialRefresh (node) {
this.mark = true
node.loaded = false // 设置loaded为false；模拟一次节点展开事件，加载重命名后的新数据；
node.expand() // 新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的
的展开事件，可以设置node.parent.loaded = false;node.parent.expand();
},
完整案例代码（没和后端交互）
<template><div>树形懒加载 局部刷新:添加或者删除节点时,后端需要返回当前节点下的最新的孩子数据<el-tree:props="defaultProps":data="data":load="loadNode"lazy:expand-on-click-node="false":check-on-click-node="true"@node-click="nodeClick"></el-tree><el-button @click="add">添加局部数据</el-button><el-button @click="deletes">删除局部刷新</el-button></div>
</template><script>export default {data() {return {nodeArr:[],mark:false,delete:false,curPath:'',curNode:'',defaultProps: {children: 'children',label: 'label',isLeaf: 'isLeaf'},data: [{label: '一级 1',filedId:'dddd',children:[{}]}, {label: '一级 2',children:[{}]}, {label: '二级 2-2',children:[{}]}],};},methods: {// 模拟删除deletes() {this.delete=truethis.partialRefreshpartialRefresh(this.curNode)},// 模拟添加数据,add() {this.partialRefreshpartialRefresh(this.curNode)},nodeClick (data, node) {console.log('node',node);this.curNode = node},// 删除// 实现局部刷新，在点击弹窗处调用的partialRefreshpartialRefresh (node) {this.mark = truenode.loaded = false // 设置loaded为false；模拟一次节点展开事件，加载重命名后的新数据；node.expand() // 新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的 的展开事件，可以设置node.parent.loaded = false;node.parent.expand();},loadNode(node, resolve) {console.log('nodexx',node);this.curNode = nodeif (node.level === 0) {return resolve(this.data);}if (node.level >= 1) {// 设置定时器模拟接口返回孩子数据setTimeout(() => {node.data.children.pop();node.data.children = []// 模拟添加的// if(this.mark) {// // 模拟添加数据，真正开发应该是后端将当前节点孩子数据返回// node.data.children.push(// {// label: '新添加的孩子',// filedId:'wwww',// isLeaf:true,// },// {// label: '初始的孩子',// filedId:'wwww',// isLeaf:true,// },// {// label: '二级 3-2',// filedId:'wwww',// children:[{}]// })// } else {// node.data.children.pop();// node.data.children.push({// label: '初始的孩子',// filedId:'wwww',// isLeaf:true,// },// {// label: '二级 3-2',// filedId:'wwww',// children:[{}]// })// }// 模拟删除if(this.delete) {// 模拟删除数据，真正开发应该是后端将当前节点孩子数据返回node.data.children.push(// {// label: '新添加的孩子',// filedId:'wwww',// isLeaf:true,// },// {// label: '初始的孩子',// filedId:'wwww',// isLeaf:true,// },{label: '二级 3-2',filedId:'wwww',children:[{}]})} else {node.data.children.pop();node.data.children.push({label: '初始的孩子',filedId:'wwww',isLeaf:true,},{label: '二级 3-2',filedId:'wwww',children:[{}]})}resolve(node.data.children)},3000)}}}};
</script><style></style>