用的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'}; |
|
