扁平数据转tree与tree数据扁平化
首先当我们拿到扁平化数据时候但展示出tree形状 需要我们改变数据
下面是将举两个数据改造的例子:
一是扁平化,具有层级递进关系的 tree 数据,转换为扁平结构的的 flat 数据
二是反扁平化,扁平结构的 flat 数据,转换为具有层级递进关系的 tree 数据
一 :扁平化函数
方法一
function treeToFlat (treeList, flatList) { treeList.map(e => { flatList.push(e) // 递归:有条件的自己调用自己,条件是 e.children.length 为真 if (e.children && e.children.length) { treeToFlat(e.children, flatList) } }) // console.log('扁平化后:', flatList) return flatList }
方法2
for (var i = 0; i < arr.length; i++) { if (arr[i].children && arr[i].children.length > 0) { this.OneD(arr[i].children); } else { this.allrouter.push(arr[i]); } }
二:反扁平化函数
function flatToTree (flatList, treeList) { flatList.map(e => { // 以 e.pid===null,作为判断是不是根节点的依据,或者直接写死根节点(如果确定的话), // 具体以什么作为判断根节点的依据,得看数据的设计规则,通常是判断层级或是否代表根节点的标记 if (e.pid === null) { // 避免出现重复数据 const index = treeList.findIndex(sub => sub.id === e.id) if (index === -1) { treeList.push(e) } } flatList.map(e2 => { if (e2.pid === e.id) { // 避免出现重复数据 const index = e.children.findIndex(sub => sub.id === e2.id) if (index === -1) { e.children.push(e2) } } }) }) }