vue元素树组件实现树懒加载的过程详解

一。页面样式

二。数据库

三。前端页面代码

模板El-tree : props=' props ' : load=' loadNode ' lazy show-checkbox/El-tree/template script export default { data(){ return { prop : { label : ' name '，children: 'zones '，isLeaf: ' leaf '，}，}；}，methods: { loadNode (node，resolve) { //如果展开第一级节点，从后台加载一级节点列表if(节点。level==0){ this。loadfirst节点(解析)；} //如果展开其他级节点，动态从后台加载下一级节点列表if(节点。level=1){ this。loadchildnode(节点，解析)；} }, //加载第一级节点loadfirst节点(解析){ this。API({ URL : '/test/tree '，method: 'post '，})。然后（数据={ console.log(数据);//这个。数据=数据。列表；返回解析(数据。列表)；}) }, //加载节点的子节点集合loadchildnode(节点，解析){ this。API({ URL : '/test/tree 2 '，method: 'post '，params 3360 { id :节点。数据。id } }).然后（数据={ console.log(数据);//这个。默认道具。儿童=数据。列表；返回解析(数据。列表)；})} } }/脚本

控制器层

@ post映射("/tree ")公共JSONObject树(){返回用户服务。tree()；} @PostMapping('/tree2 ')公共对象树(@RequestParam MapString，Object user){返回用户服务。树2(用户)；}

服务层

/** * 树*/JSONObject树();/** * 树*/JSONObject tree2(映射字符串，对象用户);实现类层

@ Override public JSON对象树(){ listjson对象列表=userdao。tree()；System.out.println(列表);返回CommonUtil.successPage(列表);} @覆盖公共JSON对象树2(MapString，Object user){ int codept=integer。parsent(用户。get(' id ').toString())；ListJSONObject list=userdao。树2(codept)；返回CommonUtil.successPage(列表);}道层

/** * 树*/ListJSONObject树();listjsonobjecttree 2(@ Param(' codept ')int codept)；制图人层

SELECT id=' tree '结果类型=' com。阿里巴巴。法斯森。JSON对象“SELECT[id]，[codept]，[name] FROM [dbo]”.[Dept]WHERE codept=' 0 '/SELECT SELECT id=' tree 2 ' result type=' com。阿里巴巴。法斯森。JSON对象“SELECT[id]，[codept]，[name] FROM [dbo]”.[部门]地点代码=# {代码}/选择总结

以上所述是小编给大家介绍的某视频剪辑软件元素树组件实现树懒加载的过程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！