el-table summary-method 通过后端获取合计

最新推荐文章于 2024-01-17 09:44:37 发布

weixin_41970358

最新推荐文章于 2024-01-17 09:44:37 发布

阅读量649

点赞数

分类专栏： summary-method 文章标签：数学建模

本文链接：https://blog.csdn.net/weixin_41970358/article/details/131074237

版权

summary-method 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

el-table summary-method 通过后端获取合计

<el-table ref=“table” v-loading=“listLoading” :data=“datalist” style=“width: 100%;margin-top:5px;” border
highlight-current-row
:height=“tableHeight” @row-click="rowClick " @sort-change=“sortthiscolumn”
:summary-method=“getSummaries” show-summary>

这里通过后端获取合计 findBySummaries

async findBySummaries() {
let res = await findByYlanimalgoodscostSummariesData(qs.stringify(this.listQuery));
this.ylanimalgoodscost = res.data
},

自定义合计函数 getSummaries
getSummaries(param) {
const {columns, data} = param;
let ylanimalgoodscost = this.ylanimalgoodscost;

  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
    }
    if (index === 1 || index === 2 || index === 3 || index === 4 || index === 5 || index === 6 || index === 12 || index === 13) {
      sums[index] = '';
    }
    if (column.property == 'offer') {
      sums[index] = ylanimalgoodscost == null ? '' : ylanimalgoodscost.offer
    }
    if (column.property == 'initvalue') {
      sums[index] = ylanimalgoodscost == null ? '' : ylanimalgoodscost.initvalue
    }
    if (column.property == 'price') {
      sums[index] = ylanimalgoodscost == null ? '' : ylanimalgoodscost.price
    }
    if (column.property == 'currentoffer') {
      sums[index] = ylanimalgoodscost == null ? '' : ylanimalgoodscost.currentoffer
    }
    if (column.property == 'stageoffer') {
      sums[index] = ylanimalgoodscost == null ? '' : ylanimalgoodscost.stageoffer
    }
  })
  return sums;
},

async getPageList() {
this.listLoading = true
await this.findBySummaries()
let res = await findByYlanimalgoodscost(qs.stringify(this.listQuery));
this.datalist = res.data.items
this.listQuery.total = res.data.total
this.$refs.table.doLayout() 关键是这里从新 doLayout 就好了
this.listLoading = false
},

![这里只出现合计原因从新吧 table doLayout 就行 ](https://img-blog.csdnimg.cn/eee03caf7fc6405ebe74a8d0c54f0a82.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/956a554108d54e1f8b2905288431b6ac.png)

Alt

带尺寸的图片:

居中的图片: Alt

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash