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)文章
這篇文章主要介紹了Vue使用formData格式類型上傳文件的示例代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue自定義屬性,結(jié)合實例形式分析了vue.js自定義屬性相關(guān)原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下2019-02-02
vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問題及解決
這篇文章主要介紹了vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇解決vue點擊控制單個樣式的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解Vue如何實現(xiàn)顏色選擇與調(diào)色板功能
顏色選擇和調(diào)色板是Web開發(fā)中常用的功能，Vue作為一個流行的JavaScript框架，可以方便地實現(xiàn)顏色選擇和調(diào)色板功能，本文講講如何在Vue中進(jìn)行顏色選擇和調(diào)色板吧2023-06-06
el-select 下拉框多選實現(xiàn)全選的實現(xiàn)
這篇文章主要介紹了el-select 下拉框多選實現(xiàn)全選的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
在vue中，我們?nèi)绾瓮ㄟ^請求接口來訪問后端的數(shù)據(jù)呢?在這里簡單總結(jié)了一個小示例，對vue請求后端數(shù)據(jù)實例代碼感興趣的朋友一起看看吧2022-09-09
這篇文章主要介紹了vue路由的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)vue路由知識，感興趣的朋友可以了解下2020-08-08
這篇文章主要介紹了vue頁面切換抖動的問題及解決過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2026-03-03
這篇文章主要介紹了vue.js實現(xiàn)標(biāo)簽頁切換效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06