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