欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年10月19日 09:20:49   作者：Milly_Liu  
這篇文章主要介紹了vue+elementUI顯示表格指定列合計數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

明確需求

下圖來自elementUI官網


在這里插入圖片描述

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

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

對于第一種情況，elementUI官網就有案例。

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

1.明確返回數(shù)據(jù)結構

以上述表格為例：

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官網 - table顯示合計行相關的屬性

在這里插入圖片描述

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

3.具體方案

在methods里面定義合計方法：

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

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

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

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

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

  • 關于vue中根據(jù)用戶權限動態(tài)添加路由的問題

    關于vue中根據(jù)用戶權限動態(tài)添加路由的問題

    每次路由發(fā)生變化時都需要調用一次路由守衛(wèi)，并且store中的數(shù)據(jù)會在每次刷新的時候清空，因此需要判斷store中是否有添加的動態(tài)路由，本文給大家分享vue中根據(jù)用戶權限動態(tài)添加路由的問題，感興趣的朋友一起看看吧
    2021-11-11
  • vue中的Key值重復問題

    vue中的Key值重復問題

    這篇文章主要介紹了vue中的Key值重復問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • 教你使用vue-autofit 一行代碼搞定自適應可視化大屏

    教你使用vue-autofit 一行代碼搞定自適應可視化大屏

    這篇文章主要為大家介紹了使用vue-autofit 一行代碼搞定自適應可視化大屏教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-05-05
  • vue3+ts項目中.env配置環(huán)境變量與情景配置方式

    vue3+ts項目中.env配置環(huán)境變量與情景配置方式

    本文介紹了如何在Vite中配置環(huán)境變量和不同的運行模式,環(huán)境變量文件以.env開頭,僅VITE_前綴的變量會被暴露,開發(fā)模式加載.env.development,生產模式加載.env.production,NODE_ENV用于區(qū)分開發(fā)和生產環(huán)境
    2024-10-10
  • 前端vue項目debugger調試操作詳解

    前端vue項目debugger調試操作詳解

    在vue項目調試的時候,代碼里面標注debugger,這篇文章主要給大家介紹了關于前端vue項目debugger調試操作的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2024-05-05
  • 淺談VUE項目打包后運行頁面一片白問題

    淺談VUE項目打包后運行頁面一片白問題

    本文主要介紹了淺談VUE項目打包后運行頁面一片白問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2023-01-01
  • Vue3使用路由VueRouter4的簡單示例

    Vue3使用路由VueRouter4的簡單示例

    在vue.js項目中使用vue-router，可以使用路由進行界面或路徑跳轉,下面這篇文章主要給大家介紹了關于Vue3使用路由VueRouter4的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2021-07-07
  • Vue生命周期函數(shù)調用詳解

    Vue生命周期函數(shù)調用詳解

    這篇文章主要介紹了Vue生命周期函數(shù)調用詳解，本文將實現(xiàn)Vue生命周期相關代碼的核心邏輯，從源碼層面來理解生命周期，感興趣的小伙伴可以參考一下
    2022-08-08
  • vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)

    vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)

    這篇文章主要為大家介紹了vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-07-07
  • vue移動端微信授權登錄插件封裝的實例

    vue移動端微信授權登錄插件封裝的實例

    今天小編就為大家分享一篇vue移動端微信授權登錄插件封裝的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08

最新評論