树形

treeListUtil

该工具的主要作用是将后端列表数据转换为前端树形数据，供前端树形组件使用。

使用方式如下：

// 引入
import { treeListUtil } from '@/utils'

const list = [
    {
        "id": 1,
        "leaf": false,
        "name": "1"
    },
    {
        "id": 2,
        "leaf": true,
        "name": "1-1",
        "parentId": 1
    },
    {
        "id": 3,
        "leaf": true,
        "name": "1-2",
        "parentId": 1,
    },
    {
        "id": 4,
        "leaf": true,
        "name": "1-2-1",
        "parentId": 3,
    },
]
const treedata = treeListUtil(list)

console.log(treedata)

/* ==>
[
    {
        "id": 1,
        "leaf": false,
        "name": "1",
        "children": [
            {
                "id": 2,
                "leaf": true,
                "name": "1-1",
                "parentId": 1
            },
            {
                "id": 3,
                "leaf": true,
                "name": "1-2",
                "parentId": 1,
                "children": [
                    {
                        "id": 4,
                        "leaf": true,
                        "name": "1-2-1",
                        "parentId": 3
                    }
                ]
            }
        ]
    }
]
*/

treeToList

该工具的主要作用是将树形数据转换为列表数据，并添加上层级level，方便进行前端的进一步处理，主要使用在树形组件内部中。

使用方式如下：

// 引入
import { treeToList } from '@/utils'


//  treeToList(tree, key = 'children')
const treedata = [
    {
        "id": 1,
        "leaf": false,
        "name": "1",
        "children": [
            {
                "id": 2,
                "leaf": true,
                "name": "1-1",
                "parentId": 1
            },
            {
                "id": 3,
                "leaf": true,
                "name": "1-2",
                "parentId": 1,
                "children": [
                    {
                        "id": 4,
                        "leaf": true,
                        "name": "1-2-1",
                        "parentId": 3
                    }
                ]
            }
        ]
    }
]
const list = treeToList(treedata)

console.log(list)
/**
  ==>
[
    {
        "id": 1,
        "leaf": false,
        "name": "1",
        "level": 1
    },
    {
        "id": 2,
        "leaf": true,
        "name": "1-1",
        "parentId": 1,
        "level": 2
    },
    {
        "id": 3,
        "leaf": true,
        "name": "1-2",
        "parentId": 1,
        "level": 2
    },
    {
        "id": 4,
        "leaf": true,
        "name": "1-2-1",
        "parentId": 3,
        "level": 3
    }
]

 * /

FastTreeUtils

该工具使用了高性能的算法，提供了高效的树形节点向上，向下迭代的能力，目前主要使用在树形组件内部的复选框处理。

基本使用方式如下：

import FastTreeUtils from '@/utils'
const list = [
    {
        "id": 1,
        "leaf": false,
        "name": "1"
    },
    {
        "id": 2,
        "leaf": true,
        "name": "1-1",
        "parentId": 1
    },
    {
        "id": 3,
        "leaf": true,
        "name": "1-2",
        "parentId": 1,
    },
    {
        "id": 4,
        "leaf": true,
        "name": "1-2-1",
        "parentId": 3,
    },
]

const fastTreeUtils = new FastTreeUtils(list)

// 不断向上迭代
fastTreeUtils.upper({id:3},(node)=>{
   console.log('upper',node.name)
   // 当明确 return false 时，停止迭代
})
// 不断向下迭代
fastTreeUtils.downward({id:1},(node)=>{
  console.log('downward',node.name)
})

/*
upper 1-2
upper 1
downward 1-1
downward 1-2
downward 1-2-1
*/