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同一行展示，也不会换行啦