/**
* @param {table列} columnsData
* @param {table的数据} data
* @param {返回总计行,可以追加【push】到数据源} callback
* @param {是否将第一列变成总计} ISOneTotal
* @param {指定列求和,为空时求和全部列} sumColumns
*/
export function totalColumns (columnsData, data, ISOneTotal = true, sumColumns = [], callback) {
var totalColumns = {}
columnsData.some((item, index) => {
if (item.children !== undefined) { // 判断是否存在多级表头
this.totalColumns(item.children, data, false, sumColumns, (childrenTotal) => {
totalColumns = Object.assign(totalColumns, childrenTotal)
})
} else {
// 如需要指定列求和
if (sumColumns.length === 0 || sumColumns.indexOf(item.dataIndex) > -1) {
var s = data.reduce((sum, current, index) => {
if (typeof (current[item.dataIndex]) === 'number') {
return sum + current[item.dataIndex]
} else {
return sum + 0
}
}, 0)
if (index === 0 && ISOneTotal) {
totalColumns = Object.assign(totalColumns, { [item.dataIndex]: '总计' })
} else {
var totalMoney = parseFloat(s).toFixed(2)
totalColumns = Object.assign(totalColumns, { [item.dataIndex]: totalMoney === '0' ? '-' : totalMoney * 1 })
}
}
}
})
callback(totalColumns)
}
显示最后一行
res.data.rows.push(data) // 追加在数据源后面
固定在列表最后显示
利用ant table的 rowClassName属性
在封装的table 或者页面中 定义样式,注意,要放到全局样式
.fiexdTr {
position: sticky;
z-index: 100000;
bottom: 0;
background: #6e6e6e;
font-weight: bold;
font-size: 15px;
color: #dbbb1c;
}
.singularRow {
background: #ffffff;
}
.quantityRow {
background: #fafafa;
}
table控件引用rowClassName
/**
* 固定总计行
* @param {*} record
* @param {*} index
*/
export function fixedTotal (record, index) {
// 检索每行数据,包含字段'总计',返回固定行样式
if (Object.values(record).indexOf('总计') > -1) {
console.log(index)
const name = 'fiexdTr'
return name
} else {
if (index % 2 === 0) { // 隔行变色
return 'singularRow'
} else {
return 'quantityRow'
}
}
}