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-columnv-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 } = paramconst 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-columnv-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 } = paramconst 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>

el-table 表尾行合并，列合并，统计相关推荐

GRIDVIEW多行多列合并单元格（合并列）
GitHub项目地址:https://github.com/mingceng/merge-gridviewcell 去年的时候,我写了两篇文章: GridView多行多列合并单元格(完整代码和例子) ...
Mysql 多行多列合并并排序（看到最后） GROUP_CONCAT()
项目需要合并列,想用Mybatis查出来,Java遍历整合.想了想太耗时,不如一条sql来的痛快. 多行多列合并排序:实现逻辑 ,先合并列,并排序,然后合并所有行. group_concat()函数 ...
bootstarp js设置列隐藏_隐藏工作表的行、列（第一种简单，第二种很坑，第三种最坑）...
各位朋友,你们好. 今天和你们分享怎样将工作表的行.列进行隐藏.我将分享两种方法: 一.直接隐藏通过选中行.列或者单元格,对行列进行隐藏效果见下图: 隐藏行,可以使用:右键菜单.Ctrl+9.开始选 ...
hive表级权限控制_数据库权限管理：表、行、列级别的权限控制
权限规则 1. 在配有主从集群时建议在主节点上做权限相关操作 2. 只有管理员和超级管理员才有将数据导入至表中的权限 3. 管理员用户赋予的是以整表为单位的权限,所有能赋予的权限为create/sel ...
举个栗子！Tableau 技巧（139）：突出显示文本表的行或列
之前,我们分享过添加操作和控制集高亮数据的方法.有广州用户反馈:我们公司的数据量不是很大,分析呈现也比较简单,经常用文本表(如下图).但是,向领导汇报时,总感觉不太方便. 如果可以突出显示文本表中 ...
html table 表格行合并列合并
目录 1.表格边框合并 2.行合并 3.列合并表格:table 行:tr 列:td 属性: border:边框 width:宽 height:高 bordercolor:变宽颜色 cellspaci ...
06 - table表格标签+ 行合并+列合并
1.table 表格标签属性在小程序中查看 cellspacing="0" 表格边框合并: 表格:table 行:tr 列:td 属性: ...
SQL小技巧系列 --- 行转列合并
首先让我们来看看这个神奇的函数wm_concat(列名),该函数可以把列值以","号分隔起来,并显示成一行,接下来上例子,看看这个神奇的函数如何应用准备测试数据 SQL> ...
table表格实现行、列冻结
客户要求实现对表格数据的头几行或者头几列进行冻结,即滚动时保持这几行/列不动,通过网上查找代码,参考已有的代码的思路,实现了可以任意对行.列进行冻结. 实现原理: 创建多个div,div之间通过css ...
列注释_【EXCEL检查问题】：如何快速检查并删除EXCEL中隐藏的工作表、行、列等信息...
前注:本案例是以EXCEL2016为示范软件,各版本的部分功能和路径可能不同在EXCEL使用过程中,你是否遇到过某一列的公式怎么修改都报错的情况?你是否遇到过一个只有区区几行数据的表格,却占用了好几 ...

el-table 表尾行合并，列合并，统计

后端返回的数据中有统计好的信息

效果

代码

后端没有给统计好的数据需要前端自己定义最后一列

效果

el-table 表尾行合并，列合并，统计相关推荐

最新文章

热门文章