树形表格的使用——配置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！