asp 网站 内容静态化,英孚做网络作业的网站,菏泽网站建设公司排名,做网站销售工资怎么样1.数据过多时进行懒加载孩子节点#xff0c;根据层级传参获取后端孩子数据
懒加载主要部分#xff1a; 1参数: :loadloadNode lazy :propsdefaultProps 2.defaultProps 需要设置isLeaf: isLeaf,去除最后一层孩子节点的展开图表 defaultProps: { ch…1.数据过多时进行懒加载孩子节点根据层级传参获取后端孩子数据
懒加载主要部分 1参数: :loadloadNode lazy :propsdefaultProps 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(); }, 完整案例代码没和后端交互
templatediv树形懒加载 局部刷新:添加或者删除节点时,后端需要返回当前节点下的最新的孩子数据el-tree:propsdefaultProps:datadata:loadloadNodelazy:expand-on-click-nodefalse:check-on-click-nodetruenode-clicknodeClick/el-treeel-button clickadd添加局部数据/el-buttonel-button clickdeletes删除局部刷新/el-button/div
/templatescriptexport 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.deletetruethis.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)}}}};
/scriptstyle/style
