Vue+Element-ui Table 列求和

  • Vue代码
  • 求和getSummaries
  • 效果图

Vue代码

<el-table v-loading="loading" :data="standardList" 
	@sort-change='sortChange' :summary-method="getSummaries" show-summary @selectionchange="handleSelectionChange">

这两个一定要加上 :summary-method=“getSummaries” show-summary
show-summary 也必须加上,如果不加,底部不会显示;
getSummaries对应的计算的函数

求和getSummaries

把getSummaries放在 methods: {}里面即可

getSummaries(param) {
	const { columns, data } = param
	const sums = []
	columns.forEach((column, index) => {
		if (index === 0) {
			sums[index] = '合计'
		} 
		// index >= 3 || index <= 11 是你需要计算的列
		// 当然也可以指定一个或者多个列
		// index === 2 || index === 3 这样值求和第二个与第三个列
		else if (index >= 3 && index <= 11) {
			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 Math.floor((prev + curr) * 100) / 100;
					} else {
						// 保存了两位小数点
						return Math.floor(prev * 100) / 100;
					}
				}, 0)
			} else {
				sums[index] = 'N/A'
			}
		} else {
			sums[index] = ''
		}
	})
	return sums
},

效果图

效果图

GitHub 加速计划 / eleme / element
14
2
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐