el-table 表尾行合并，列合并，统计
后端返回的数据中有统计好的信息
效果
代码
<template>
<div class="result-record">
<div v-for="(table, tableIndex) in tableData" :key="tableIndex" :class="tableIndex !== 0 ? 'mrt20' : ''">
<!-- show-summary :summary-method="getSummaries" -->
<el-table :data="table" border stripe :span-method="objectSpanMethod" style="width: 100%;">
<el-table-column
v-for="(item, index) in columns"
:key="index"
show-overflow-tooltip
:prop="item.key"
:label="item.columnName"
:width="item.width"
/>
</el-table>
</div>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'ResultRecord',
props: {
},
emits: {
},
setup () {
const columns = ref([
{
key: 'time',
columnName: '操作时间（月）',
width: ''
},
{
key: 'opsType',
columnName: '操作类型',
width: ''
},
{
key: 'cnt',
columnName: '记录数量',
width: ''
}
])
const tableData = ref(
[
[
{
time: '2021/08',
opsType: 'SELECT',
cnt: 6
},
{
time: '2021/08',
opsType: 'DROP',
cnt: 3
},
{
time: '2021/08',
opsType: 'CREATE',
cnt: 4
},
{
time: '2021/08',
opsType: 'INSERT',
cnt: 7
},
{
time: '行汇总（总计）',
opsType: '',
cnt: 20
}
],
// [
// {
// time: '2021/08',
// opsType: 'SELECT',
// cnt: 1
// },
// {
// time: '2021/08',
// opsType: 'DROP',
// cnt: 3
// },
// {
// time: '2021/08',
// opsType: 'CREATE',
// cnt: 3
// },
// {
// time: '2021/08',
// opsType: 'INSERT',
// cnt: 1
// }
// ],
// [
// {
// time: '2021/08',
// opsType: 'SELECT',
// cnt: 1
// },
// {
// time: '2021/08',
// opsType: 'DROP',
// cnt: 3
// },
// {
// time: '2021/08',
// opsType: 'CREATE',
// cnt: 3
// },
// {
// time: '2021/08',
// opsType: 'INSERT',
// cnt: 1
// }
// ]
]
)
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
if (rowIndex === 4) {
// 处理合计，[1,2]表示合并1行2列，[0,0]表示改行不显示
if (columnIndex === 0) {
// 定位到4行0列的ID，告诉该单元格合并1行2列
return [1, 2]
} else if (columnIndex === 1) {
// 定位到6行1列的姓名，告诉该单元格不显示
return [0, 0]
}
} else {
if (columnIndex === 0) {
if (rowIndex % 4 === 0) {
return {
rowspan: 4,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
const getSummaries = (param) => {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '行汇总（总计）'
// 只计算最后一列
} else if (index === columns.length - 1) {
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)
} else {
sums[index] = ''
}
} else {
sums[index] = ''
}
})
return sums
}
return {
columns,
tableData,
getSummaries,
objectSpanMethod
}
}
})
</script>
<style lang="scss" scoped>
@import '@/styles/common-style.scss';
.result-record {
}
</style>
后端没有给统计好的数据需要前端自己定义最后一列
效果
<template>
<div class="result-record">
<div v-for="(table, tableIndex) in tableData" :key="tableIndex" :class="tableIndex !== 0 ? 'mrt20' : ''">
<el-table :data="table" border stripe :span-method="objectSpanMethod" show-summary :summary-method="getSummaries" style="width: 100%;">
<el-table-column
v-for="(item, index) in columns"
:key="index"
show-overflow-tooltip
:prop="item.key"
:label="item.columnName"
:width="item.width"
/>
</el-table>
</div>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'ResultRecord',
props: {
},
emits: {
},
setup () {
const columns = ref([
{
key: 'time',
columnName: '操作时间（月）',
width: ''
},
{
key: 'opsType',
columnName: '操作类型',
width: ''
},
{
key: 'cnt',
columnName: '记录数量',
width: ''
}
])
const tableData = ref(
[
[
{
time: '2021/08',
opsType: 'SELECT',
cnt: 6
},
{
time: '2021/08',
opsType: 'DROP',
cnt: 3
},
{
time: '2021/08',
opsType: 'CREATE',
cnt: 4
},
{
time: '2021/08',
opsType: 'INSERT',
cnt: 7
},
// {
// time: '行汇总（总计）',
// opsType: '',
// cnt: 20
// }
],
// [
// {
// time: '2021/08',
// opsType: 'SELECT',
// cnt: 1
// },
// {
// time: '2021/08',
// opsType: 'DROP',
// cnt: 3
// },
// {
// time: '2021/08',
// opsType: 'CREATE',
// cnt: 3
// },
// {
// time: '2021/08',
// opsType: 'INSERT',
// cnt: 1
// }
// ],
// [
// {
// time: '2021/08',
// opsType: 'SELECT',
// cnt: 1
// },
// {
// time: '2021/08',
// opsType: 'DROP',
// cnt: 3
// },
// {
// time: '2021/08',
// opsType: 'CREATE',
// cnt: 3
// },
// {
// time: '2021/08',
// opsType: 'INSERT',
// cnt: 1
// }
// ]
]
)
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
if (rowIndex === 4) {
// 处理合计，[1,2]表示合并1行2列，[0,0]表示改行不显示
if (columnIndex === 0) {
// 定位到4行0列的ID，告诉该单元格合并1行2列
return [1, 2]
} else if (columnIndex === 1) {
// 定位到6行1列的姓名，告诉该单元格不显示
return [0, 0]
}
} else {
if (columnIndex === 0) {
if (rowIndex % 4 === 0) {
return {
rowspan: 4,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
const getSummaries = (param) => {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '行汇总（总计）'
// 只计算最后一列
} else if (index === columns.length - 1) {
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)
} else {
sums[index] = ''
}
} else {
sums[index] = ''
}
})
return sums
}
return {
columns,
tableData,
getSummaries,
objectSpanMethod
}
}
})
</script>
<style lang="scss" scoped>
@import '@/styles/common-style.scss';
.result-record {
}
</style>