用zTree替代Element UI的Tree，解决大数据卡顿问题

Vue Element UI的Tree组件在加载大量节点时会出现明显的卡顿，电脑配置差点更是难受。即使使用懒加载，即每展开父节点再去加载子节点，若字节点数目同样众多，Tree组件在使用过程中依旧卡顿。这里提供一个jquery的方案，使用zTree替代Element UI的Tree组件，让树组件使用非常流畅。

因为树节点数目众多，使用zTree依旧延续展开父节点再去加载子节点的方式。

zTree： >

当然是通过id与pid，只要你的json数据中id与pid能够形成父子关系，就能形成一棵树

[{id:1,pid:13,name:"根节点1"},{id:5,pid:1,name:"根节点下的子节点"},{id:2,pid:13,name:"根节点2"}

再次提醒，一定要形成父节点的id是子节点的pid才能构成一棵树

当然如果要判断父子关系也是用id与pid啦

// 异步返回后执行的函数可以这么写

function(childNodes) {

var treeObj = $fnzTreegetZTreeObj("tree");// 传入参数为ul的id

var parentNode = treeObjgetNodeByParam("id", childNodes[0]pId);// 也可以用其他方式获得父节点

treeObjaddNodes(parentNode, childNodes);

}

以上就是关于用zTree替代Element UI的Tree，解决大数据卡顿问题全部的内容，包括:用zTree替代Element UI的Tree，解决大数据卡顿问题、ztree要怎么判断该节点下面是否有子节点、js树ztree,设置节点父子关系,是通过id/pid,还是通过children 等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！