ad717ce269
Former-commit-id: 5e31719473b165e4f4f9775caeb75443c824629c [formerly 5e31719473b165e4f4f9775caeb75443c824629c [formerly 5e31719473b165e4f4f9775caeb75443c824629c [formerly 5e31719473b165e4f4f9775caeb75443c824629c [formerly 1d07766fa79982363c9bd79d5fe0b4031ed3b8a4 [formerly 8b21a4544fffa595a1fcf30d5ccfd49f019e63fe]]]]] Former-commit-id: d320f28bc04991cf266dd2d6099a8bc74f8d973f Former-commit-id: b1b333020d86cab873b1d4bc87da08fdb662a414 Former-commit-id: 8f07a5e3d37e39fbb53db3b345eb141632d2621d [formerly 8262123bccb3e834e4397302796d78cd50128836] Former-commit-id: 8aa0f5b635b997c8b1d25dfa06ef4951b2f9e116 Former-commit-id: 30a553d7dd9eb96312a97c6783a9f302bf00ac82 Former-commit-id: 90144d1fdb9b97b308bb4958cefa2ff7aee13563 Former-commit-id: 30e7030b18ba0311b3ec6363596ccde7b4a77243 Former-commit-id: 89f15d9036a8e782bab91a7857ad2463f3df8d15
143 lines
2.9 KiB
Vue
143 lines
2.9 KiB
Vue
<template>
|
||
<div>
|
||
<el-table
|
||
:data="tableData6"
|
||
border
|
||
show-summary
|
||
style="width: 100%;">
|
||
<el-table-column
|
||
prop="id"
|
||
label="ID"
|
||
width="180">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="name"
|
||
label="姓名">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="amount1"
|
||
sortable
|
||
label="数值 1">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="amount2"
|
||
sortable
|
||
label="数值 2">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="amount3"
|
||
sortable
|
||
label="数值 3">
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-table
|
||
:data="tableData6"
|
||
border
|
||
height="200"
|
||
:summary-method="getSummaries"
|
||
show-summary
|
||
style="width: 100%; margin-top: 20px;">
|
||
<el-table-column
|
||
prop="id"
|
||
label="ID"
|
||
width="180">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="name"
|
||
label="姓名">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="amount1"
|
||
label="数值 1（元）">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="amount2"
|
||
label="数值 2（元）">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="amount3"
|
||
label="数值 3（元）">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
filename: __filename
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
export default {
|
||
title: '表尾合计行',
|
||
index: 16,
|
||
data () {
|
||
return {
|
||
tableData6: [{
|
||
id: '12987122',
|
||
name: '王小虎',
|
||
amount1: '234',
|
||
amount2: '3.2',
|
||
amount3: 10
|
||
}, {
|
||
id: '12987123',
|
||
name: '王小虎',
|
||
amount1: '165',
|
||
amount2: '4.43',
|
||
amount3: 12
|
||
}, {
|
||
id: '12987124',
|
||
name: '王小虎',
|
||
amount1: '324',
|
||
amount2: '1.9',
|
||
amount3: 9
|
||
}, {
|
||
id: '12987125',
|
||
name: '王小虎',
|
||
amount1: '621',
|
||
amount2: '2.2',
|
||
amount3: 17
|
||
}, {
|
||
id: '12987126',
|
||
name: '王小虎',
|
||
amount1: '539',
|
||
amount2: '4.1',
|
||
amount3: 15
|
||
}]
|
||
}
|
||
},
|
||
methods: {
|
||
getSummaries (param) {
|
||
const { columns, data } = param
|
||
const sums = []
|
||
columns.forEach((column, index) => {
|
||
if (index === 0) {
|
||
sums[index] = '总价'
|
||
return
|
||
}
|
||
const values = data.map(item => Number(item[column.property]))
|
||
if (!values.every(value => isNaN(value))) {
|
||
sums[index] = values.reduce((prev, curr) => {
|
||
const value = Number(curr)
|
||
if (!isNaN(value)) {
|
||
return prev + curr
|
||
} else {
|
||
return prev
|
||
}
|
||
}, 0)
|
||
sums[index] += ' 元'
|
||
} else {
|
||
sums[index] = 'N/A'
|
||
}
|
||
})
|
||
return sums
|
||
}
|
||
}
|
||
}
|
||
</script>
|