vue中el-table樹狀表格末行合計(jì)實(shí)現(xiàn)
更新時(shí)間：2023年11月01日 16:57:13 作者：神探小白牙
本文主要介紹了vue中el-table樹狀表格末行合計(jì)實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
首先,由于我的表頭是動(dòng)態(tài)的,所以就稍微復(fù)雜一點(diǎn)
效果圖
表頭數(shù)據(jù)格式是這樣的
表格的數(shù)據(jù)格式是這樣的
然后用合并的方法,此處就需要遞歸去計(jì)算,根據(jù)props去匹配每一列的數(shù)據(jù),然后加起來,關(guān)鍵代碼
//合計(jì)處理
getSummaries(param) {
const { columns, data } = param;
const sums = ["合計(jì)"];
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樹狀表格末行合計(jì)實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)el-table樹狀表格合計(jì)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue2.0項(xiàng)目中使用Ueditor富文本編輯器示例代碼
本篇文章主要介紹了vue2.0項(xiàng)目中使用Ueditor富文本編輯器示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
解決vant的Cascader級(jí)聯(lián)選擇組建css樣式錯(cuò)亂問題
這篇文章主要介紹了解決vant的Cascader級(jí)聯(lián)選擇組建css樣式錯(cuò)亂問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue配合Vant使用時(shí)area省市區(qū)選擇器的使用方式
這篇文章主要介紹了Vue配合Vant使用時(shí)area省市區(qū)選擇器的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
element-ui滾動(dòng)條el-scrollbar置底方式
這篇文章主要介紹了element-ui滾動(dòng)條el-scrollbar置底方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了vue組件historyApiFallback作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了Vue前端解析Excel數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動(dòng),導(dǎo)航欄對(duì)應(yīng)變化詳解
這篇文章主要介紹了vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動(dòng),導(dǎo)航欄對(duì)應(yīng)變化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue2.0實(shí)現(xiàn)移動(dòng)端的輸入框?qū)崟r(shí)檢索更新列表功能
最近小編在做vue2.0的項(xiàng)目，遇到移動(dòng)端實(shí)時(shí)檢索搜索更新列表的效果，下面腳本之家小編給大家?guī)砹藇ue2.0 移動(dòng)端的輸入框?qū)崟r(shí)檢索更新列表功能的實(shí)例代碼，感興趣的朋友參考下吧2018-05-05
詳解Electron中如何使用SQLite存儲(chǔ)筆記
這篇文章主要為大家介紹了Electron中如何使用SQLite存儲(chǔ)筆記示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了如何解決vue項(xiàng)目打包后文件過大問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04