树形表格的使用——配置DOM结构的延用[若依tree和普通树形结构的通用]

树形表格的使用——配置DOM结构的延用[若依tree和普通树形结构的通用]

技术:

架构：elemen-admin-beautiful，
引用：若依前后端分离版树形表格
element-ui 树形结构

背景:

业务需在web同app端回显树形数据结构的报告预览，经商讨确认使用树形结构的表格配置相关Dom节点，本文将记载个人完成树形结构的部分point

预览效果图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qW2SevlP-1598070798263)(http://mmbiz.qpic.cn/mmbiz_jpg/qRJazDfIbDyvFXT4LSnd8ibEh1iaTxf4F1fvTlZ73PYSYiaOe05YPEWRFWt9MbhfEANQ33H1oHWpGb4d4SSNJh2jQ/0)]

一、树形结构的设计

在设计该数据的时候，本人就子节点中需要逐一配置的事项，追溯单一子节点的效率方面，参照若依前后端分离版结构，规定父节点和子节点的children统一为[]，通过menuId与parentId绑定形成nodeList，随后经handleTree（）转化为树形表格所需结构[即子节点包含在父节点对象的children list中]使用。

如图所示：

一维list转化为tree树形结构的代码如下:

 	  /**
       * 构造树型结构数据
       * @param {*} data 数据源
       * @param {*} id id字段 默认 'id'
       * @param {*} parentId 父节点字段 默认 'parentId'
       * @param {*} children 孩子节点字段 默认 'children'
       * @param {*} rootId 根Id 默认 0
       */
      handleTree(data, id, parentId, children, rootId) {
        id = id || "id";
        parentId = parentId || "parentId";
        children = children || "children";
        rootId = rootId || 0;
        //对源数据深度克隆
        const cloneData = JSON.parse(JSON.stringify(data));
        //循环所有项
        const treeData = cloneData.filter((father) => {
          let branchArr = cloneData.filter((child) => {
            //返回每一项的子级数组
            return father[id] === child[parentId];
          });
          branchArr.length > 0 ? (father.children = branchArr) : "";
          //返回第一层
          return father[parentId] === rootId;
        });
        return treeData != "" ? treeData : data;
      },

二、新增节点的完成

如前图(增加节点)所示，本人将其中含有配置的表单contentFom在每次新增时添加至nodeList数组中，随后将其重置，最后利用上面的handleTree的方法将nodeList转化为树形结构特征的dataList数组

主要代码如下:

// 新增节点
this.nodeList.push(this.contentForm);
// 表单重置
this.contentForm = this.$options.data().contentForm;
this.dataList = this.handleTree(this.nodeList, "menuId");

三、删除指定节点

如果使用树形结构的List这一步操作可移至element-ui树形控件——>自定义节点内容中查看详细删除

element-ui 删除源码:

remove(node, data) {
    const parent = node.parent;
    const children = parent.data.children || parent.data;
    const index = children.findIndex(d => d.id === data.id);
    children.splice(index, 1);
},

Link:

本文探讨nodeList一维带有父子级关系数组的删除方法，删除核心使用递归算法完成,主要思想:

定义一个del_arr数组主要用于记录需要删除的所有节点索引[基于一维父子级关系的数组]，通过对nodeList遍历完成删除。需要注意的是两个点:1.删除一个父级的时候，需要递归查找子级，这样不会遗漏子级存在子级的情况；2.获取到所有需要删除的节点索引组成的数组del_arr时，需要注意，不能顺序遍历删除，否则会打乱nodeList的索引，可以将该索引数组倒序排列之后完成相应操作

主要代码如下:

/** 删除按钮操作 */
      handleDelete(row) {
        this.del_arr = [];
        this.$confirm('是否确认删除目录名称为"' + row.nodeTitle + '"的节点?')
          .then((_) => {
            if (this.nodeList.length != 0) {
              // 删除当前行
              this.nodeList.forEach((item, index) => {
                if (item.menuId === row.menuId) {
                  this.del_arr.push(index);
                }
              });
              // 删除子代行
              this.findNodeChild(row.menuId);
              // 倒序
              this.del_arr.sort((a, b) => {
                return b - a;
              });
              this.del_arr.forEach((item, index) => {
                this.nodeList.splice(item, 1);
              });
              this.dataList = this.handleTree(this.nodeList, "menuId");
            }
          })
          .catch((_) => {});
      },

递归方法findNodeCHild（）：

// 寻找子代节点
      findNodeChild(child_id) {
        this.nodeList.forEach((item, index) => {
          if (item.parentId == child_id) {
            this.del_arr.push(index);
            this.findNodeChild(item.menuId); // 注意此时的参数
          }
        });
      },

四、编辑节点的完成

阅读至此，感谢垂阅.

对于编辑节点，如若好的想法，请多加指教

本文拙见为：通过树形表格编辑按钮获取节点信息，利用menuId获取当前的节点对象，根据配置或者编辑修改相应的属性值，最后重新渲染树，完成编辑

主要代码如下:

 this.nodeList.map((item, index) => {
     if (item.menuId == this.tmpID) {
         item.nodeTitle = this.contentForm.nodeTitle;
     }
 });
// 节点重置
this.nodeReset();
this.dataList = this.handleTree(this.nodeList, "menuId");

最后，Kyle分享一句话送给各位:

不要因害怕冒险而踟蹰不前，而要为创造伟大提供可能

rm.nodeTitle;
}
});
// 节点重置
this.nodeReset();
this.dataList = this.handleTree(this.nodeList, “menuId”);

最后，Kyle分享一句话送给各位:

不要因害怕冒险而踟蹰不前，而要为创造伟大提供可能

Good Lucky，Bro！