antd+table--->当你的表格数据需要改为树形展示

效果：

 

 话不多说，直接上代码: 【不知道从哪搜罗来的改了改】

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

// 处理数据 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; };

　　

?

1 2 3 4 5 6 7 8

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

　　

ps:因为有一个标题过长需要隐藏的需求，所以column这边需要再做样式处理：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

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