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

本文连接https://www.cnblogs.com/aknife/p/11709255.html

一.页面样式

二.数据库

三.前端页面代码

 <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>

本文连接https://www.cnblogs.com/aknife/p/11709255.html