el-table合计行

表格合计行放顶部

合计行渲染所有数据的和（不是计算当前分页的和）

表格合计行放顶部

// 表格合计行放顶部
.summaryMethodTop.el-table {display: flex;flex-direction: column;.el-table__body-wrapper {order: 1;}
}

让后端将合计行的数据返回一个obj，字段跟表格数据字段保持一致，然后再合计方法getSummariesMethod中进行渲染 sums[index] = isNaN(this.sumObj[column.property]) ? '' : this.sumObj[column.property]

 <!-- 表格 --><div class="tableContent"><el-table class="summaryMethodTop" :data="tableData" stripe border fit height="550px" :header-cell-style="tableHeaderColor" :summary-method="getSummariesMethod" :show-summary="true"><el-table-column v-for="(value,name) in tableThead" :key="value" :label="value" :prop="name" min-width="120"><template slot-scope="scope">{{ scope.row[name] }}</template></el-table-column></el-table><Pagination :total="formData.total" :page-num.sync="formData.pageNum" :page-size.sync="formData.pageSize" @initPage="initList" /></div>

 data() {return {// 表格表头tableThead: {yearAgreementNo: '编号',checkCompany: '单位',monthWeight: '月度量（吨）',agreementTotalWeight: '总量（吨）',annualDepositAmount: '年度金额（元）',rebateAmount: '返利金额（元）',agreementTotalAmount: '付款总额（元）',paidAmount: '已付货款（元）',returnAmount: '已退货款（元）',transferIntoAmount: '转入金额（元）',transferOutAmount: '转出金额（元）',num: '总数量',},formData: {pageNum: 1,pageSize: 10,total: 0},// 表格数据定义（目前是假数据，方便看效果）tableData: [{yearAgreementNo: '编号',checkCompany: 单位',monthWeight: '10',agreementTotalWeight: '6',annualDepositAmount: '66',rebateAmount: '66',agreementTotalAmount: '66',paidAmount: '66',returnAmount: '66',transferIntoAmount: '66',transferOutAmount: '66',num: '66'}],//合计行数据定义， 这里后端计算所有数据的和后，返回（目前是假数据，方便看效果）sumObj:  {yearAgreementNo: '',checkCompany: '',monthWeight: '10',agreementTotalWeight: '6',annualDepositAmount: '66',rebateAmount: '66',agreementTotalAmount: '66',paidAmount: '66',returnAmount: '66',transferIntoAmount: '66',transferOutAmount: '66',num: '66'}}},

/** 表格合计行渲染所有数据的和，不是当前页的和 */getSummariesMethod(param) {const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === 0) {sums[index] = '合计';return;}sums[index] = isNaN(this.sumObj[column.property]) ? '' : this.sumObj[column.property]});return sums;},

// 修改table header的背景色tableHeaderColor({ row, column, rowIndex, columnIndex }) {if (rowIndex === 0) {return 'background-color: #000;color: #fff;font-weight:bold'}},

表格合计行放底部：

   <el-table:data="tableData"id="gy-table"height="780"borderstripeshow-summary:summary-method="getSummaries" highlight-current-row><el-table-column type="index" width="50" label="序号"></el-table-column><el-table-columnprop="enter_date"label="采购日期"></el-table-column><el-table-columnprop="all_count"label="总数量"></el-table-column><el-table-columnprop="all_amount"label="采购金额（元）"></el-table-column></el-table>

  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))) {//指定列名是totalAmount或amount的列，其他不统计if (!values.every(value => isNaN(value)) && (column.property === 'totalAmount' || column.property ==='amount')) {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;},

修改合计行的字体样式

<el-table:data="billDetailsData"bordershow-summaryid="gy-table":summary-method="getSummaries"style="width: 100%"stripe
><el-table-column prop="name" label="项目" min-width="100"/><el-table-column prop="money1" label="金额1"/><el-table-column prop="money2" label="金额2"/><el-table-column prop="money3" label="金额3"/><el-table-column prop="money4" label="金额4"/><el-table-column prop="money5" label="金额5"/><el-table-column prop="money6" label="金额6"/><el-table-column prop="money7" label="金额7"/><el-table-column prop="money8" label="金额8"/>
</el-table>

引入数字小写转大写方法
import { chineseNumber } from ‘@/utils/utils’

赋值为最后一个值并转大写以及合并

watch: {billDetailsData: {async handler() {await this.$nextTick(()=>{const tds = document.querySelectorAll('#gy-table .el-table__footer-wrapper tr>td');tds[1].innerText = chineseNumber(tds[8].innerText) //数字转大写tds[1].colSpan = 3;tds[1].style.fontWeight = 'bold';tds[1].style.fontSize = '14';tds[1].style.textAlign = 'center'tds[2].style.display = 'none'tds[3].style.display = 'none'});}},
},

自动计算各项和

getSummaries(param) {const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === 0) {sums[index] = '总价';return;}if (index === 4) {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;
},

el-table合计行相关推荐

antdvue的table合计行
在开发后台管理系统中,经常会碰到合计行的需求,element有直接的属性可以使用,antdvue的需要手动去生成 https://www.antdv.com/components/table-cn/# ...
bootstrap table添加合计行
添加合计行首先为表格添加showFooter: true属性然后为列添加footerFormatter属性 var templateTableParams = {classes: "ta ...
react：antd 中 table 添加合计行
用的Antd 的 UI 框架. 场景:table 中后面想添加一行合计.合计的值由后端计算提供.目前想到两种方法. 第一种:比较好维护. 第二种:可以实现功能效果,但是感觉不太优雅. 方法一:把合计行 ...
列表table，将合计行进行单元格合并，element-ui
列表table,将合计行进行单元格合并 1.将列表进行合计操作 2.进行合计行-------单元格合并 3.获取平均数 4.如果想要对分数进行编辑 1.将列表进行合计操作 <el-table i ...
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动是因为el-table__fixed或el-table__fixed-right有了合计之后把 el-table_ ...
elementUI table 添加合计行，合计行放置顶部(标题下内容上)，合计行渲染所有数据的和(取后端接口数据)，合并合计单元格。
1.将show-summary设置为true就会在表格尾部展示合计行. <el-table:data="tableData"id="tableData"s ...
【ElementUI】 table表格尾部的合计行，固定表头却不显示合计行
背景按照官网要求不固定表头,添加show-summary就可以显示合计行问题但是给table加了一个固定高度之后,就不显示了, 打开控制台可以看到这个合计是存在的那么需要做两步,合计即可出现 ...
antd中如何给Table表格添加合计行
最近项目需求:在表格底部添加一行为金额的合计行,然后分页每页都显示,金额字段是后端返回的数据,前端不进行计算. 因为项目的UI框架使用的是Ant Design 3.x版本,找了一下Table的使用方法 ...
实现table表格数据按名称字段分层，各层都有一个合计行，自定义的表格总合计行（vue.js+elementUI）
代码实现 <div class="tableBody" ref="tableBody"><table><div v-for=&qu ...
element table 合计第一行固定列
element table 合计第一行在这位大哥这里学来的, 但同时我这边的情况是: 固定高度, 第一列固定, 参数多, 因此, 这个方法不能够完全满足, 因此加入以下代码: 代码作用: 在每次获 ...

el-table合计行

表格合计行放顶部

表格合计行放底部：

el-table合计行相关推荐

最新文章

热门文章