效果图:
思路解析:
首先进行了el-table列表的组件封装,很多参数是传进来的。如果是普通的列表,相关参数直接定义就行
1、使用el-table的summary-method处理表尾行
(1)定义summaryIndex用于指定合计在哪一列显示
(2)定义el,将表尾合计行分成两个上下显示的div,便于添加类名和修改样式
(3)定义summaryList数组,需要处理哪些列,就传这样的格式,包含要处理列的字段名,如:[‘payAmt’,‘receiveAmt’]
2、复选框勾选的时候和表尾合计行联动
(1)在单选和全选事件中,调用表尾合计行方法
(2)定义ckeckedResult对象,用于和包含处理列的字段名的数组,即summaryList数组进行对比,拿到需要处理列的选中项之和
(3)在表尾合计行方法中,将勾选项之和回显
完整代码:
表尾合计行方法
getSummaries(param) {
const { columns, data } = param
let sums = []
if (!data.length) return []
columns.forEach((column, index) => {
if (this.summaryIndex > 0) {
sums[this.summaryIndex] = (() => {
let el = (
<div class="count-row-total">
<div class="count-box"> 选中合计:</div>
<div>合计:</div>
</div>
)
return el
})()
} else {
if (index === 0) {
sums[index] = '合计:'
return
}
}
// 非税收入详情,集中支付列表
if (this.summaryList.length > 0 && this.summaryList.includes(column.property)) {
const column = columns[index]
const values = data.map(item => Number(item[column.property]))
const total = values.reduce((acc, curr) => {
return isNaN(curr) ? acc : acc + curr
}, 0)
let sumtotal = total.toFixed(2)
let checktotal = Object.keys(this.ckeckedResult).length == 0 ? 0 : this.ckeckedResult[column.property].toFixed(2)
sums[index] = (() => {
let el = (
<div class="count-row-total">
{' '}
<div class="count-box txpr"> {checktotal}</div>
<div class="count-row txpr">{sumtotal}</div>
</div>
)
return el
})()
return
} else {
sums[index] = (() => {
let otherel = (
<div class="count-row-total">
{' '}
<div class="count-box txpr"> </div>
<div class="count-row txpr"> </div>
</div>
)
return otherel
})()
}
})
return sums
},
复选框单选
selectCheck(sele, row) {
this.currentRow = row
this.summaryParams(sele)
// multiple为true不禁用多选
if ((this.selectable && !this.selectable(row)) || this.multiple === true) {
// this.$refs.standTables.doLayout()
const obj = {
columns: this.$refs.standTables.columns,
data: this.form.source,
}
this.getSummaries(obj)
return
}
// 清除 所有勾选项
this.$refs.standTables.clearSelection()
// 当表格数据都没有被勾选的时候 就返回
// 主要用于将当前勾选的表格状态清除
if (sele.length == 0) return
this.$refs.standTables.toggleRowSelection(row, true)
},
复选框全选
selectAll(selection) {
// console.log(selection,'全选');
// multiple为true不禁用多选
if (this.multiple === true) {
this.summaryParams(selection)
return
}
this.$refs.standTables.clearSelection()
},
summaryParams(data) {
let sum = 0
if (this.summaryList.length > 0) {
this.ckeckedResult = this.summaryList.reduce((acc, key) => {
if (!acc[key]) {
acc[key] = 0
}
data.forEach(item => {
acc[key] += item[key] || 0
})
return acc
}, {})
}
},
css
.count-row-total {
.count-box {
padding: 2px;
border-bottom: 1px solid #dcdfe6;
}
.count-row {
padding-right: 2px;
text-align: right;
}
.txpr {
text-align: right;
padding-right: 20px;
}
}
/deep/ .el-table .cell {
padding: 0 !important;
}