6.在使用elementui的表格,需要合计时:summary-method 和 show-summary存在,并设置在指定高度,出现显示不完全或者显示不出来

6.在使用elementui的表格,需要合计时:summary-method 和 show-summary存在,并设置在指定高度,出现显示不完全或者显示不出来

有时候需要在table的底部有合计,在table里设置,show-summary就可以了,
但是给table加了一个固定高度的话,就不显示了

如图:
在这里插入图片描述

解决方案

1.在el-table加上ref属性

<el-table :data="data" border height="600" :summary-method="getSummaries" show-summary ref="payData">

2.在updated钩子函数上

this.$nextTick(() => {
     this.$refs.payData.doLayout();
})
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你只想合计某几列,可以使用 element 表格的 `summary-method` 属性。具体操作步骤如下: 1. 在表格中定义需要合计的列,可以通过 `fixed` 属性将其固定在左侧或右侧。 2. 在表格的 `summary-method` 属性中编写一个函数,该函数接收两个参数:合计数据和当前行数据。在该函数中,将需要合计的列的值累加到合计数据中。 下面是一个简单的示例代码: ```html <template> <el-table :data="tableData" show-summary summary-method="getTotal"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄" fixed="left"></el-table-column> <el-table-column prop="score" label="分数"></el-table-column> <el-table-column prop="rank" label="排名"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, score: 80, rank: 1 }, { name: '李四', age: 22, score: 90, rank: 2 }, { name: '王五', age: 18, score: 70, rank: 3 }, { name: '赵六', age: 21, score: 85, rank: 4 } ], totalScore: 0 } }, methods: { getTotal({ columns, data }) { this.totalScore = 0 columns.forEach((column, index) => { if (index !== 0 && index !== columns.length - 1) { data.forEach(item => { this.totalScore += item[column.property] }) } }) return [ { name: '合计', score: this.totalScore } ] } } } </script> ``` 在上面的示例中,我们将表格的第二列 `age` 固定在左侧,并且只对第三列 `score` 进行合计。`summary-method` 方法中遍历需要合计的列,并将其值累加到 `totalScore` 变量中。最后返回一个包含合计数据的数组,其中 `name` 列固定为“合计”,`score` 列的值为 `totalScore` 变量的值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值