Vue中使用懒加载El-Tree使用样例（前后端）

一、后端

1、树节点实体类

@Data
public class TreeNode {
	private long id; // 结点主键
	private String code; // 结点编码
	private String name; // 结点名
	private Integer grade; // 结点等级
	private Integer displayOrder; // 显示顺序
	private Integer pId;
	private Boolean open; // 是否展开
	private Boolean isParent; // 是否为父节点
	private int currentState; // 当前状态	

在这个实体类中，ID，Name，open，isParent四个是必须的，后两个可以默认设置为true，前两个则要从数据库查，其他字段按需查找，如果有其他需要的字段自己加就行

2、控制器和相关服务

/**
 * 获取树(tree)
 * @param id
 * @return
 */
@PostMapping(value="/getTree.do")
@ResponseBody
public List<TreeNode> getTree(int id){
	return treeService.getTree(id);
}

其中id就是结点的主键，Treenode是结点实体，service对应的是根据id查找某记录的功能（这部分比较简单，不写了）

3、dao层

public List<TreeNode> getTree(int id) {
		String sql="";
		List<TreeNode> list=null;
		if(id==-1) {
			sql="select " + 
					"CATALOG_ID," + 
					"CATALOG_NAME " + 					
					"from catalog_table where PARENT_CATALOG_ID=0" ;
		}else {
			sql="select " + 
					"CATALOG_ID," + 
					"CATALOG_NAME " + 					
					"from catalog_table where PARENT_CATALOG_ID="+id ;
		}
		list=jdbc.query(sql,(rs,i)->{
			ZtreeNode node=new ZtreeNode();
			node.setId(rs.getInt("CATALOG_ID"));
			node.setName(rs.getString("CATALOG_NAME"));
			node.setIsParent(true);
			node.setOpen(true);
			return node;
		});
		return list;
	}

二、前端

1、HTML部分：

<el-tree
  ref="Tree"
  :props="props"
  :load="loadTree"
  lazy
  @node-click="handleNodeClick"
  :expand-on-click-node="expandFlag"
>
</el-tree>

2、静态配置：

// 只要你用我上面写好的实体类封装，那下面这段代码直接复制即可
data() {
	return {
		props: {
	    id:'id',
	    label: 'name',
	    children: [],
	    isLeaf: true
		},
		expandFlag:false,
		TreeId: -1
	}
}

3、函数

// 树加载ajax
loadTree(node, resolve) {
  // 如果node被选择，不为null，就把结点值赋给TreeId
  if(node.data){
      this.TreeId=node.data.id
  }
  // 第一次加载
  if (node.level === 0) {
      let getTreeID=JSON.stringify({
          id:-1
      })
      this.$http({
          method: 'get',
          url: this.$http.sdcUrl('/getTree.do'),
          params: {
              id: -1
          }
      }).then(({data})=>{          
          return resolve(data);
      })
  }
  if (node.level >= 1) {
      let getTreeID=JSON.stringify({
          id:this.TreeId
      })
      this.$http({
          method: 'get',
          url: this.$http.sdcUrl('/getTree.do'),
          params: {
              id: this.TreeId
          }
      }).then(({data})=>{                     
          return resolve(data);
      })
  }
},
// 结点点击事件
handleNodeClick(node) {
   /**
   这里写你要的函数，其实结点点击事件并非必须，如果你只是要静态展示目录，那这个方法duck不必
   */
},