vue+element树组件 实现树懒加载的过程详解

一.页面样式

二.数据库

 三.前端页面代码

<template>
<el-tree :props="props"
  :load="loadNode"
  lazy
  show-checkbox>
</el-tree>
</template>

<script>
export default {
data () {
return {
 props: {
 label: 'name',
 children: 'zones',
 isLeaf: 'leaf',

},
};
},
methods: {
loadNode (node, resolve) {
 //如果展开第一级节点，从后台加载一级节点列表
 if (node.level == 0) {
 this.loadfirstnode(resolve);
 }
 //如果展开其他级节点，动态从后台加载下一级节点列表
 if (node.level >= 1) {
 this.loadchildnode(node, resolve);
 }
},
//加载第一级节点
loadfirstnode (resolve) {

this.api({
 url: "/test/tree",
 method: "post",

}).then(data => {
 console.log(data);
 //this.data = data.list;
 return resolve(data.list);

})
},
//加载节点的子节点集合
loadchildnode (node, resolve) {
 this.api({
 url: "/test/tree2",
 method: "post",
 params: {
  id: node.data.id
 }
 }).then(data => {
 console.log(data);
 //this.defaultProps.children = data.list;
 return resolve(data.list);

})
}

}

}
</script>

controller层

@PostMapping("/tree")
public JSONObject tree( ) {return userService.tree();
}

@PostMapping("/tree2")
public JSONObject tree(@RequestParam Map<String, Object> user) {return userService.tree2(user);
}

service层

/**
 * 树
 */
JSONObject tree();

/**
 * 树
 */
JSONObject tree2(Map<String, Object> user);

serviceImpl层

@Override
public JSONObject tree() {
 List<JSONObject> list=userDao.tree();
 System.out.println(list);
 return CommonUtil.successPage(list);
}
@Override
public JSONObject tree2(Map<String, Object> user) {
 int codept=Integer.parseInt(user.get("id").toString()) ;
 List<JSONObject> list=userDao.tree2(codept);
 return CommonUtil.successPage(list);
}

dao层

/**
 * 树
 */
List<JSONObject> tree();
List<JSONObject> tree2(@Param("codept")int codept);

mapper层

<select id="tree" resultType="com.alibaba.fastjson.JSONObject">
 SELECT [id]
 ,[codept]
 ,[name]
FROM [dbo].[Dept] WHERE codept ='0'
</select>

<select id="tree2" resultType="com.alibaba.fastjson.JSONObject">
 SELECT [id]
 ,[codept]
 ,[name]
FROM [dbo].[Dept] WHERE codept =#{codept}
</select>

总结

以上所述是小编给大家介绍的vue+element树组件 实现树懒加载的过程详解,网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

来源：https://www.cnblogs.com/aknife/archive/2019/10/20/11709255.html