vue+element树组件 实现树懒加载

 本文连接

一.页面样式

 

二.数据库

 

 三.前端页面代码

 1 <template>
 2 
 3   <el-tree :props="props"
 4            :load="loadnode"
 5            lazy
 6            show-checkbox>
 7   </el-tree>
 8 
 9 </template>
10 <script>
11 export default {
12   data () {
13     return {
14       props: {
15         label: 'name',
16         children: 'zones',
17         isleaf: 'leaf',
18 
19       },
20     };
21   },
22   methods: {
23     loadnode (node, resolve) {
24       //如果展开第一级节点，从后台加载一级节点列表
25       if (node.level == 0) {
26         this.loadfirstnode(resolve);
27       }
28       //如果展开其他级节点，动态从后台加载下一级节点列表
29       if (node.level >= 1) {
30         this.loadchildnode(node, resolve);
31       }
32     },
33     //加载第一级节点
34     loadfirstnode (resolve) {
35 
36       this.api({
37         url: "/test/tree",
38         method: "post",
39 
40       }).then(data => {
41         console.log(data);
42         //this.data = data.list;
43         return resolve(data.list);
44 
45       })
46     },
55     //加载节点的子节点集合
56     loadchildnode (node, resolve) {
57       this.api({
58         url: "/test/tree2",
59         method: "post",
60         params: {
61           id: node.data.id
62         }
63       }).then(data => {
64         console.log(data);
65         //this.defaultprops.children = data.list;
66         return resolve(data.list);
67 
68       })
69     }
70 
71   }
72 
73 }
74 </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>

 

 

本文连接