vue+elementUI顯示表格指定列合計數(shù)據(jù)方式
更新時間：2023年10月19日 09:20:49 作者：Milly_Liu
這篇文章主要介紹了vue+elementUI顯示表格指定列合計數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
明確需求
下圖來自elementUI官網(wǎng)
根據(jù)合計行數(shù)據(jù)的來源可以分為兩種情況：
- 接口返回的數(shù)據(jù)只有表格中對應(yīng)每個ID的數(shù)據(jù)，最后一行的合計是由前端來計算的
- 表格中的合計行數(shù)據(jù)是從接口中返回的，不是由前端計算的，只需要將拿到的數(shù)據(jù)顯示即可
對于第一種情況，elementUI官網(wǎng)就有案例。
在開發(fā)中遇到了第二種情況，來記錄一下處理方案：
1.明確返回數(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顯示合計行相關(guān)的屬性
<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)了。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue(element ui)el-table樹形表格展示以及數(shù)據(jù)對齊方式
- vue?element?ui表格相同數(shù)據(jù)合并單元格效果實例
- vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
- 使用vue+element?ui實現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)
- Vue組件庫ElementUI實現(xiàn)表格加載樹形數(shù)據(jù)教程
- vue elementUI table表格數(shù)據(jù) 滾動懶加載的實現(xiàn)方法
- vue Element UI 解決表格數(shù)據(jù)不更新問題及解決方案
相關(guān)文章
關(guān)于vue中根據(jù)用戶權(quán)限動態(tài)添加路由的問題
每次路由發(fā)生變化時都需要調(diào)用一次路由守衛(wèi)，并且store中的數(shù)據(jù)會在每次刷新的時候清空，因此需要判斷store中是否有添加的動態(tài)路由，本文給大家分享vue中根據(jù)用戶權(quán)限動態(tài)添加路由的問題，感興趣的朋友一起看看吧2021-11-11
這篇文章主要介紹了vue中的Key值重復(fù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
教你使用vue-autofit 一行代碼搞定自適應(yīng)可視化大屏
這篇文章主要為大家介紹了使用vue-autofit 一行代碼搞定自適應(yīng)可視化大屏教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
vue3+ts項目中.env配置環(huán)境變量與情景配置方式
本文介紹了如何在Vite中配置環(huán)境變量和不同的運行模式,環(huán)境變量文件以.env開頭,僅VITE_前綴的變量會被暴露,開發(fā)模式加載.env.development,生產(chǎn)模式加載.env.production,NODE_ENV用于區(qū)分開發(fā)和生產(chǎn)環(huán)境2024-10-10
在vue項目調(diào)試的時候,代碼里面標(biāo)注debugger,這篇文章主要給大家介紹了關(guān)于前端vue項目debugger調(diào)試操作的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-05-05
本文主要介紹了淺談VUE項目打包后運行頁面一片白問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2023-01-01
在vue.js項目中使用vue-router，可以使用路由進行界面或路徑跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3使用路由VueRouter4的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了Vue生命周期函數(shù)調(diào)用詳解，本文將實現(xiàn)Vue生命周期相關(guān)代碼的核心邏輯，從源碼層面來理解生命周期，感興趣的小伙伴可以參考一下2022-08-08
vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)
這篇文章主要為大家介紹了vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
今天小編就為大家分享一篇vue移動端微信授權(quán)登錄插件封裝的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08