vue中el-table樹狀表格末行合計實現(xiàn)
首先,由于我的表頭是動態(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)文章
解決vant的Cascader級聯(lián)選擇組建css樣式錯亂問題
這篇文章主要介紹了解決vant的Cascader級聯(lián)選擇組建css樣式錯亂問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07Vue配合Vant使用時area省市區(qū)選擇器的使用方式
這篇文章主要介紹了Vue配合Vant使用時area省市區(qū)選擇器的使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01vue 導(dǎo)航錨點_點擊平滑滾動,導(dǎo)航欄對應(yīng)變化詳解
這篇文章主要介紹了vue 導(dǎo)航錨點_點擊平滑滾動,導(dǎo)航欄對應(yīng)變化詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue2.0實現(xiàn)移動端的輸入框?qū)崟r檢索更新列表功能
最近小編在做vue2.0的項目,遇到移動端實時檢索搜索更新列表的效果,下面腳本之家小編給大家?guī)砹藇ue2.0 移動端的輸入框?qū)崟r檢索更新列表功能的實例代碼,感興趣的朋友參考下吧2018-05-05