vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式

更新時(shí)間：2023年10月19日 09:20:49 作者：Milly_Liu

這篇文章主要介紹了vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

明確需求

下圖來(lái)自elementUI官網(wǎng)

在這里插入圖片描述

根據(jù)合計(jì)行數(shù)據(jù)的來(lái)源可以分為兩種情況：

接口返回的數(shù)據(jù)只有表格中對(duì)應(yīng)每個(gè)ID的數(shù)據(jù)，最后一行的合計(jì)是由前端來(lái)計(jì)算的
表格中的合計(jì)行數(shù)據(jù)是從接口中返回的，不是由前端計(jì)算的，只需要將拿到的數(shù)據(jù)顯示即可

對(duì)于第一種情況，elementUI官網(wǎng)就有案例。

在開發(fā)中遇到了第二種情況，來(lái)記錄一下處理方案：

1.明確返回?cái)?shù)據(jù)結(jié)構(gòu)

以上述表格為例：

res: {
	memberInfo: [
		{
			ID: 123456,
			'姓名'：'王小虎',
			'數(shù)值1': 1,
			'數(shù)值2': 4,
			'數(shù)值3': 7
		},
		{
			ID: 123456,
			'姓名'：'王小虎',
			'數(shù)值1': 2,
			'數(shù)值2': 5,
			'數(shù)值3': 8
		},
		{
			ID: 123456,
			'姓名'：'王小虎',
			'數(shù)值1': 3,
			'數(shù)值2': 6,
			'數(shù)值3': 9
		}
	],
	sumInfo: {
		'sum1': 6,
		'sum1': 15,
		'sum1': 24,
	}
}

2.elementUI官網(wǎng) - table顯示合計(jì)行相關(guān)的屬性

在這里插入圖片描述

<el-table 
	:data = "tableData"
    border
    show-summary
    :summary-method="getSummaries" 
>
</el-table>

3.具體方案

在methods里面定義合計(jì)方法：

methods: {
	getSummaries () {
		const { columns, data } = param;
		const sums = [];
		columns.forEach((column, index) => {
		if(index === 0) {
			sums[index] = '合計(jì)';
			return;
		}
		switch(column.property) {  // column.property可以匹配它的每一列的命名， 然后賦值
			case "數(shù)值1":
				sums[index] = this.sum.sum1; //值取自后臺(tái)
				break;
			case "數(shù)值2":
				sums[index] = this.sum.sum2; //值取自后臺(tái)
				break;
			case "數(shù)值3":
				sums[index] = this.sum.sum3; //值取自后臺(tái)
				break;
			default:
				break;
			}
		});
		return sums;
	}
}

sum中存放的是從后臺(tái)拿到的合計(jì)數(shù)據(jù)：

data() {
	return {
		members: []   // === res.memberInfo
		sum:{}   // === res.sumInfo
	}
}

至此，表格尾行顯示合計(jì)就實(shí)現(xiàn)了。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue使用formData格式類型上傳文件的示例
這篇文章主要介紹了Vue使用formData格式類型上傳文件的示例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-09-09
Vue自定義屬性實(shí)例分析
這篇文章主要介紹了Vue自定義屬性,結(jié)合實(shí)例形式分析了vue.js自定義屬性相關(guān)原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下
2019-02-02
vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問(wèn)題及解決
這篇文章主要介紹了vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
解決vue點(diǎn)擊控制單個(gè)樣式的問(wèn)題
今天小編就為大家分享一篇解決vue點(diǎn)擊控制單個(gè)樣式的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
詳解Vue如何實(shí)現(xiàn)顏色選擇與調(diào)色板功能
顏色選擇和調(diào)色板是Web開發(fā)中常用的功能，Vue作為一個(gè)流行的JavaScript框架，可以方便地實(shí)現(xiàn)顏色選擇和調(diào)色板功能，本文講講如何在Vue中進(jìn)行顏色選擇和調(diào)色板吧
2023-06-06
el-select 下拉框多選實(shí)現(xiàn)全選的實(shí)現(xiàn)
這篇文章主要介紹了el-select 下拉框多選實(shí)現(xiàn)全選的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
vue?請(qǐng)求后端數(shù)據(jù)的示例代碼
在vue中，我們?nèi)绾瓮ㄟ^(guò)請(qǐng)求接口來(lái)訪問(wèn)后端的數(shù)據(jù)呢?在這里簡(jiǎn)單總結(jié)了一個(gè)小示例，對(duì)vue請(qǐng)求后端數(shù)據(jù)實(shí)例代碼感興趣的朋友一起看看吧
2022-09-09
詳解vue路由
這篇文章主要介紹了vue路由的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)vue路由知識(shí)，感興趣的朋友可以了解下
2020-08-08
vue頁(yè)面切換抖動(dòng)的問(wèn)題及解決過(guò)程
這篇文章主要介紹了vue頁(yè)面切換抖動(dòng)的問(wèn)題及解決過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2026-03-03
vue.js實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果
這篇文章主要介紹了vue.js實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-06-06