import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Table} from 'antd'; const columns = [ { title: 'Other', fixed: 'left', children: [ { title: 'Name', children: [ { title: '姓', dataIndex: 'name', key: 'name' }, { title: '名', dataIndex: 'name1', key: 'name1' } ] }, { title: 'Age', dataIndex: 'age', key: 'age' } ] }, { title: 'Score', dataIndex: 'score', key: 'score' }, { title: 'Address', dataIndex: 'address', key: 'address' }, { title: 'Action', key: 'action', fixed: 'right', render: (text, record) => ( Action ) } ]; const data = [ { key: '1', name: '张', name1: '三', age: 22, score:80, address: 'New York No. 1 Lake Park Sidney No. 1 Lake ParkSidney No. 1 Lake ParkSidney No. 1 Lake ParkSidney No. 1 Lake Park' }, { key: '2', name: 'Jim Green', name1: 'John Brown', age: '42', score:95, address: 'London No. 1 Lake ParkSidney No. 1 Lake ParkSidney No. 1 Lake ParkSidney No. 1 Lake ParkSidney No. 1 Lake Park' }, { key: '3', name: 'Joe Black', name1: 'John Brown', age: 32, score:60, address: 'Sidney No. 1 Lake ParkSidney No. 1 Lake ParkSidney No. 1 Lake ParkSidney No. 1 Lake Park' } ]; const calcRow = [ { colspan: 2, render: () => 合计 }, { render: sum => sum('age') }, { render: sum => sum('score') } ]; // 全部子列 let allColumns = []; // 合计行到全部子列的index映射 const calcRowMapper = [0]; // 求和方法 const summate = dataIndex => { return data.reduce((a, b) => a + parseFloat(b[dataIndex]), 0) || 0; }; // 带有合计行的table const tableWidthSum = props => { let calcTds = []; // 合计行的单元格 let occupiedColNumber = 0; // 合计行总共占有的列(colspan)数 // 当前要渲染的子列 const currentCols = props.children.find(item => item.type === 'tbody').props.children[0].props.children().props.columns; if (!(allColumns.length && allColumns.length > currentCols.length)) { // 渲染普通列 allColumns = currentCols; calcTds = calcRow.map((c, i) => { const tdProps = {}; const oldLength = calcRowMapper.length; tdProps.colspan = parseInt(c.colspan, 10) || 1; occupiedColNumber += tdProps.colspan; if (i < calcRow.length - 1) { calcRowMapper.length += tdProps.colspan; } calcRowMapper.fill(i, oldLength - 1); return {c.render && c.render(summate)}; }); // 合计行列数不足时末尾补充空td if (occupiedColNumber < currentCols.length) { const colspans = `${currentCols.length - occupiedColNumber}`; calcTds.push(); } } else { // 渲染固定列 // 此次渲染固定的列在全部子列中的index const indexes = currentCols.map(c => allColumns.findIndex(col => col.dataIndex === c.dataIndex)); // 筛选出此次渲染的列对应的合计列信息 const filtedMapper = Array.from(new Set(calcRowMapper.filter((c, i) => indexes.includes(i)))); // 此次参与渲染的部分合计列 const filtedCalcRow = calcRow.filter((c, i) => filtedMapper.includes(i)); calcTds = filtedCalcRow.map(c => { const tdProps = {}; if (c.colspan) { tdProps.colspan = Math.min(c.colspan || 1, indexes.length - occupiedColNumber) || 1; occupiedColNumber += tdProps.colspan; } else { occupiedColNumber += 1; } if (occupiedColNumber <= indexes.length) { return {c.render && c.render(summate)}; } return null; }); // 合计行列数不足时末尾补充空td if (calcTds.length < currentCols.length && occupiedColNumber < indexes.length) { const colspan = `${currentCols.length - calcTds.length}`; calcTds.push( ); } } return ( {calcTds} {props.children}

); }; ReactDOM.render(, document.getElementById('container'));

Table with extra row