0%

14.Tree树形控件使用要点

树形控件主要使用了ElementUI中的控件,ElementUI中树的加载可以通过load属性一个一个懒加载,在官方的案例中有这种用法,个人非常不推荐这种用法,很麻烦。我的主要思路如下:

  1. 在页面加载时,我在mounted方法中就去获取了所有的部门数据,然后直接加载到树上(这种方式比较省事,特别是处理后面动态添加删除时很方便,小伙伴在工作中可以根据实际情况选取合适的策略)。核心代码如下:

    1
    2
    3
    4
    5
    6
    this.getRequest("/system/basic/dep/-1").then(resp=> {
    _this.treeLoading = false;
    if (resp && resp.status == 200) {
    _this.treeData = resp.data;
    }
    })
  2. 添加节点时,当服务端添加成功后,会返回刚刚添加的节点的json,通过递归找到这一段json所在的位置,动态假如到树中。核心代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    setDataToTree(treeData,pId,respData){
    for(var i=0;i
    var td = treeData[i];
    if(td.id==pId) {
    treeData[i].children=treeData[i].children.concat(respData);
    return;
    }else{
    this.setDataToTree(td.children, pId, respData);
    }
    }
    }

    这是通过递归找到添加的位置,动态添加。

  3. 删除节点时,当服务端返回删除成功时,一样找到删除节点的位置,动态从树中删除。核心代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    deleteLocalDep(treeData,data){
    for(var i=0;i
    var td = treeData[i];
    if(td.id==data.id) {
    treeData.splice(i, 1);
    return;
    }else{
    this.deleteLocalDep(td.children, data);
    }
    }
    }

    这也是在删除成功后,通过递归找到删除的位置,动态删除数据。

  4. 由于我采用了一次性加载所有部门的策略,所以节点过滤这块特别容易,基本上就是官方案例了。