vue中el-table樹狀表格末行合計實現(xiàn)
更新時間：2023年11月01日 16:57:13 作者：神探小白牙
本文主要介紹了vue中el-table樹狀表格末行合計實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
首先,由于我的表頭是動態(tài)的,所以就稍微復(fù)雜一點
效果圖
表頭數(shù)據(jù)格式是這樣的
表格的數(shù)據(jù)格式是這樣的
然后用合并的方法,此處就需要遞歸去計算,根據(jù)props去匹配每一列的數(shù)據(jù),然后加起來,關(guān)鍵代碼
//合計處理
getSummaries(param) {
const { columns, data } = param;
const sums = ["合計"];
let num = 0;
const func = (arr, props) => {
arr.forEach((item) => {
if (item.map) {
const value = item.map[props];
// 轉(zhuǎn)數(shù)字
num += value && value != "" ? Number(value) : 0;
}
if (item.children && item.children.length > 0) {
func(item.children, props);
}
});
};
columns.forEach((item, index) => {
if (index > 0) {
const props = item.property;
num = 0;
func(data, props);
sums.push(num);
}
});
return sums;
},
到此這篇關(guān)于el-table樹狀表格末行合計實現(xiàn)的文章就介紹到這了,更多相關(guān)el-table樹狀表格合計內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法
今天小編就為大家分享一篇vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue2實現(xiàn)可復(fù)用的輪播圖carousel組件詳解
這篇文章主要為大家詳細(xì)介紹了vue2實現(xiàn)可復(fù)用的輪播圖carousel組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
vue如何點擊多個tab標(biāo)簽打開關(guān)閉多個頁面
這篇文章主要介紹了vue如何點擊多個tab標(biāo)簽打開關(guān)閉多個頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)模態(tài)框組件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細(xì)介紹了如何在Vue2中實現(xiàn)組件props雙向綁定,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Javascript vue.js表格分頁，ajax異步加載數(shù)據(jù)
這篇文章主要介紹了Javascript vue.js表格分頁，ajax異步加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2016-10-10
前端上傳大文件、視頻的時候會出現(xiàn)超時、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個切片的功能,接下來就詳細(xì)的給大家介紹一下vue大文件視頻切片上傳的處理方法,需要的朋友可以參考下2023-08-08
Vue3使用Vue Router實現(xiàn)前端路由控制
在現(xiàn)代Web應(yīng)用中,前端路由控制是非常重要的一部分,它可以幫助我們將不同的頁面內(nèi)容展示給用戶,同時保持用戶在瀏覽不同頁面時的連貫性,本文將介紹如何使用Vue Router來實現(xiàn)前端路由控制,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue如何查找數(shù)組中符合條件的對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue+elementUI中使用Echarts之餅圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10