Ant Design - Tree树形控件添加与删除

背景

树节点添加曾删改操作。

难点

直接处理树节点比较比较困难。

解决

多维数组降维为一维数组，处理一维数组再转为二维数组。

解决函数

一维数组转树节点

//默认一维数组
let statictreedata = [
    {
        key: '1',
        title: 'home',
        parentId: '0'
    },
    {
        key: '2',
        title: 'setting',
        parentId: '0'
    },
    {
        key: '3',
        title: 'home-1',
        parentId: '1'
    },
    {
        key: '4',
        title: 'home-2',
        parentId: '3'
    },
    {
        key: '5',
        title: 'setting-1',
        parentId: '2'
    }
]

//一维数组转多维
function returnTree(arr) {
    function recursionFun(temparr, key) {
        let tree = []
        temparr.forEach(item => {
            if (key === item.parentId){
                tree.push({
                    ...item,
                    children: recursionFun(arr, item.key)
                })
            }
        })
        return tree
    }

    return recursionFun(arr, '0')
}

//把转换完的多维数组 给到tree组件
//returnTree(statictreedata)

//自定义treetitle展示
function titleRender({ title, key }) {
    return <>
        <span className='useselect' onDoubleClick={() => { setsonvisible(true) }}>{title}</span>
        <PlusOutlined className='marginlr20' onClick={() => { 
        	//业务的处理函数
        	//在这里处理拿到key 去处理一维数组，然后再转二维数组 ，再setState
        }} />
        <MinusOutlined onClick={() => { 
        	//业务的处理函数
        	//在这里处理拿到key 去处理一维数组，然后再转二维数组 ，再setState
        }} />
    </>
}

<Tree
    defaultExpandAll={true}
    titleRender={titleRender}
    treeData={returnTree(statictreedata)}
/>