ztree使用过程中遇到的问题总结

背景

项目中有很多个树状图，经调研选择了ztree，项目是vue框架

问题

1、不同单页面的ztree的id是相同的，导致ztree有时显示，有时不显示
解决办法：不同的vue单页面用不同的ztree的id

2、ztree的数据是后台获取的，第一个元素是父级，但是无子元素，ztree的图标显示成了子的
解决办法：获得所有的节点，如果父节点无子节点设置isParent = true

var nodes = this.$refs.ztree.getNodes();
if(nodes.length > 0){
    
    
   for(let item of nodes){
    
    
     this.isParent = true
   }
}

3、勾选部门树

//resultArr为从服务器获得的所有树元素，depIds为获得的所有选中项
var depIds = this.$refs.ztree.checkedNodes;
for(let item of resultArr){
    
    
  for(let i of depIds){
    
    
    if(item.id == i){
    
    
       item.checked = true
    }
  }
}