解决element-ui table show-summary合计行不显示问题

在table的底部添加合计设置show-summary就可以了

但是给table加了一个固定高度话,就不显示了,其实这个合计是存在的

解决办法:

1.不设置固定高度

2.在vue的生命周期updated调用一下doLayout就可以了

updated () {
  this.$nextTick(() => {
    this.$refs.table.doLayout()
  })
}

 

### 实现 Element-UI 表格合计并计算百分比 为了在 `Element-UI` 的表格中添加合计并计算百分比,可以利用 `el-table` 组件的 `show-summary` 属性和 `summary-method` 自定义方法。通过这种方式能够灵活控制哪些列参与合计运算,并且针对特殊列如百分比执特定算法。 #### 启用合计与自定义汇总逻辑 设置 `el-table` 标签内的 `show-summary=true` 来开启默认的合计显示功能;同时指定 `summary-method` 函数用于定义个性化的统计规则[^2]: ```html <template> <div id="app"> <el-table :data="tableData" border style="width: 100%" show-summary :summary-method="getSummaries"> <!-- 列定义 --> </el-table> </div> </template> <script> export default { data() { return { tableData: [ // 数据源... ] }; }, methods: { getSummaries(param) { const { columns, data } = param; const sums = []; columns.forEach((column, index) => { if (index === 0) { sums[index] = &#39;总计&#39;; 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); // 对于需要展示为百分比的最后一列单独处理 if (index === columns.length - 1 && column.label.includes(&#39;百分比&#39;)) { sums[index] = `${(sums[index]/data.length).toFixed(2)}%`; } sums[index] += &#39;&#39;; } else { sums[index] = &#39;-&#39;; } }); return sums; } } }; </script> ``` 上述代码片段展示了如何创建一个带有合计表格,在此过程中特别注意对于含有“百分比”的最后一列表达式的转换操作,确保其按照平均值的形式呈现并且保留两位有效数字[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值