主要是两个步骤,
1.处理接口返回数据,给其添加两个属性,一个是合并行数(列数),一个是当前数据的序号
2.在columns结合antd官网的处理方法合并表格
3.尽可能得减少计算量
数据处理函数
/** * 表单表头合并 * @param list 需要遍历的数组 * @param key 合并依赖的字段名 后端字段必须保证有这么一个字段 */ //主要赋予两个属性,一个是total:该条数据占几行 number:该条数据的序号 export const getTotal = (list, key) => { let number = 0; let lastMenber = 0; list?.map((item, index) => { if (index !== 0 && index !== list.length - 1) { if (item[key] != list[index - 1][key]) { if (number === 0) { //total表示该数据占几行 list[0].total = index; lastMenber = index; } else { list[lastMenber].total = index - lastMenber; lastMenber = index; } number += 1; } else { item.total = 0; } } else if (index === list.length - 1) { if (item[key] != list[index - 1][key]) { list[lastMenber].total = list.length - 1 - lastMenber; item.total = 1; lastMenber = 0; number += 1; } else { list[lastMenber].total = list.length - lastMenber; lastMenber = 0; } } //number表示序号 item.number = number; }); return list; };
columns(哪些字段需要合并的,就加上render去处理)
const columns = [ { title: ‘序号‘, dataIndex: ‘rowNo‘, key: ‘rowNo‘, render: (text, record, index) => { const obj = { children: record.number + 1, props: {}, }; if (record.total) { obj.props.rowSpan = record.total; } else { obj.props.rowSpan = 0; } return obj; }, }, { title: ‘地址‘, dataIndex: ‘address‘, key: ‘address‘, render: (text, record) => { const content = ( <span style={{ color: ‘#00aa4f‘, border: 0, cursor: ‘pointer‘ }} > {text} </span> ); const obj = { children: content, props: {}, }; if (record.total) { obj.props.rowSpan = record.total; } else { obj.props.rowSpan = 0; } return obj; }, }, { title: ‘姓名‘, dataIndex: ‘name‘, key: ‘name‘, render: (text, record) => { const obj = { children: text, props: {}, }; if (record.total) { obj.props.rowSpan = record.total; } else { obj.props.rowSpan = 0; } return obj; }, }, { title: ‘性别‘, dataIndex: ‘性别‘, key: ‘性别‘, render: (text, record) => { const obj = { children: text, props: {}, }; if (record.total) { obj.props.rowSpan = record.total; } else { obj.props.rowSpan = 0; } return obj; }, }, { title: ‘年龄‘, dataIndex: ‘age‘, key: ‘age‘, render: (text, record) => { const obj = { children: text, props: {}, }; if (record.total) { obj.props.rowSpan = record.total; } else { obj.props.rowSpan = 0; } return obj; }, }, { title: ‘当前状态‘, dataIndex: ‘status‘, key: ‘status‘, }, { title: ‘结果‘, dataIndex: ‘result‘, key: ‘result‘, }, ];
table组件(合并所有姓名相同的数据)
<Table columns={columns} dataSource={getTotal(list, ‘name‘)} ></Table>