react 中 table 添加合计行

用的Antd 的 UI 框架。

场景：table 中后面想添加一行合计。合计的值由后端计算提供。目前想到两种方法。

第一种：比较好维护。
第二种：可以实现功能效果，但是感觉不太优雅。

方法一：把合计行插入到数组中

 

1､列表数据
// 列表 const columns = [     {       title: '序号',       dataIndex: 'index',       render:(text, record, index) => { if(record.saletime === '合计'){ return '' } else { return ++index } }     },     {       title: '门店',       dataIndex: 'branchname',       render: (text, record) =><span>{text ? text : '-'}</span>     },     {       title: '毛利',       dataIndex: 'profit',       sorter: true,       sortkey:'profit',       sortOrder: sortedInfo.columnKey === 'profit' && sortedInfo.order,       render:(text)=><span>{text ? text: '-'}</span>     }, ];
2､  合计行的数据合并到列表中（要做判断，如果没有数据，不显示）。
const sums = {   index: '',     branchname: '合计',     profit: alllist[0] ? alllist[0].profitAll : '', } const totalList = list && list.length > 0 ? [...list, sums] : [];
3､table模块
<Table   columns={columns}   dataSource={totalList}   loading={loading}   rowKey={record => Math.random()}   pagination={paginationProps}     bordered   onChange={this.handleTableChange}     scroll = {{x: true}} />
4､model中传过来的合计行数据
// 合计数据处理 let all = {   profitAll:data.paramsSum.profitAll, }; let arr = []; arr.push(all)   yield put({     type: 'save',     payload: {         list: data.pageInfo.list || [],         pagination: {             current: parseInt(data.pageInfo.page, 10),             pageSize: parseInt(data.pageInfo.pageSize, 10),             total: parseInt(data.pageInfo.totalRecords, 10)         },         alllist: arr     }, });
5､page 传参
const { list, pagination } = this.props;       const paginationProps = {             simple: false,             ...pagination,             pageSize: list && list.length == 0 ? pagination.pageSize : pagination.pageSize + 1,             total: list && list.length == 0 ? pagination.total : pagination.total + parseInt(pagination.total/pagination.pageSize) + 1         };           paginationProps.showTotal = function() { //设置显示一共几条数据             return '共 ' + pagination.total + ' 条';       }
6､model 中 page 要改成默认 10条，因为合计是作为一条数据 push 进去的，且每页都存在。后端实际返回的值是 10, 在页面中改成了 11
const { data: savepage} = yield select(({memberassetsstatis}) => memberassetsstatis);         payload.pageSize = savepage.pagination.pageSize;

 

方法二：控制列表宽度（能实现，但是不推荐）

1､table 表格中加一个 footer 属性，表头 showHeader 隐藏。
<div className="view_controller footer">         <Table             columns={columns}             dataSource={list}             loading={loading}             rowKey={record => Math.random()}             pagination={paginationProps}             bordered             onChange={this.handleTableChange}             scroll = {{x: 2000}}             footer={() => {                     return (                         <Table                             showHeader={false} // table 的 columns 头部隐藏                             columns={columnv}                             dataSource={alllist}                             rowKey={record => Math.random()}                             bordered                             pagination={false}                             scroll = {{x: 2000}}                             style={status}                         />                     )             }}     /> </div>
2､table 列表，每个列要加宽度。
// 列表 const columns = [         {           title: '序号',           dataIndex: 'index',           key: 'index',             width: '10%',             render: (text, record, index) => <span>{++index}</span>         },         {             title: '门店',             dataIndex: 'branchname',             key: 'branchname',             width: '10%',             render: (text, record) =><span>{text ? text : '-'}</span>         },         {             title: '数量',             dataIndex: 'num',             key: 'num',             width: '80%',             render: (text, record) =><span>{text ? text : '-'}</span>         }, ];
3､table 合计行（就是：footer 那行列表），每列的宽度要和上面列表宽度一样。
// 合计 const columnv = [         {             title: '序号',             dataIndex: 'index',             key: 'index',             width: '10%'         },         {             title: '门店',             dataIndex: 'branchname',             key: 'branchname',             width: '10%',             render: (text, record) =><span>合计</span>         },         {             title: '数量',             dataIndex: 'num',             key: 'num',             width: '80%',             render: (text, record) => <span>{`-`}</span>         }, ];
4､合计行要做判断，如果没有数据，不显示。
// 合计行显示／隐藏 let status = list && (list.length == '0') ? {display: 'none'} : {display: 'block'};