antd+table--->當你的表格數據需要改為樹形展示

效果：

 

 話不多說，直接上代碼: 【不知道從哪搜羅來的改了改】

    // 處理數據
    const getData = list => {
        // 刪除所有children
        list.forEach(item => {
            delete item.children;
        });
        // 將數據存儲為 以 id 為 KEY 的 map 索引數據列
        const map = {};
        list.forEach(item => {
            map[item.id] = item;
        });
        const newList = [];
        list.forEach(item => {
            // 以當前遍歷項的pid,去map對象中找到索引的id
            const parent = map[item.parentTaskId];
            // 如果找到索引，那么說明此項不在頂級當中,那么需要把此項添加到他對應的父級中
            if (parent) {
                (parent.children || (parent.children = [])).push(item);
            } else {
                // 如果沒有在map中找到對應的索引ID,那么直接把當前的item添加到 val結果集中，作為頂級
                newList.push(item);
            }
        });
        return newList;
    };

　　

 <Table
                loading={loading}
                defaultExpandAllRows
                columns={columns}
                rowKey="id"
                dataSource={data}
                pagination={false}
            />

　　

ps:因為有一個標題過長需要隱藏的需求，所以column這邊需要再做樣式處理：

{
            title: '任務名稱',
            dataIndex: 'taskName',
            key: 'taskName',
            width: '30%',
            render: (text, record) => (
                <div
                    style={{
                        display: 'inline-block',
                        width: '70%',
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        verticalAlign: ' text-bottom'
                    }}
                >
                    <span
                        title={record.taskName}
                        style={{ color: '#ffa808', cursor: 'pointer' }}
                        onClick={() => {
                            router.push({
                                pathname: '/personal/work/taskdetail',
                                query: {
                                    id: record.id,
                                    activeKey: 'detailMsg'
                                }
                            });
                        }}
                    >
                        {record.taskName}
                    </span>
                </div>
            )
        },

　　

這樣既不會影響前面的icon同一行展示，也不會換行啦