vue表格(table)計(jì)算總計(jì)方式
更新時(shí)間：2022年07月31日 10:02:40 作者：manyuejizhao
這篇文章主要介紹了vue表格(table)計(jì)算總計(jì)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue 表格計(jì)算總計(jì)
<el-table ? ? ? ? v-loading="loading" ? ? ? ? :summary-method="getSummaries" ? ? ? ? show-summary ? ? ? ? :data="abcList" ? ? ? ? border ? ? ? ? tooltip-effect="darkTable" ? ? ? >
首先需要在table標(biāo)簽中添加
:summary-method="getSummaries" ?// 調(diào)用方法
show-summary ?//標(biāo)簽屬性
methods: {
? getSummaries(param) {
? ? const { columns, data } = param
? ? console.log(columns, data, 'columns,data')
? ? const sums = []
? ? columns.forEach((column, index) => {
? ? ? // 設(shè)置第一列的值為總計(jì)
? ? ? if (index === 0) {
? ? ? ? sums[index] = '總計(jì)'
? ? ? ? return
? ? ? }
? ? ? ? sums[3] = this.form.result
? ? ? ? sums[3] += '元'
? ? })
? ? return sums
? ?}
}因?yàn)镋lement上計(jì)算總計(jì)的方法是計(jì)算當(dāng)前頁上金額的總和，稍加修改~
sums[index] = '總計(jì)' ? // 把下標(biāo)為0的列賦值為總計(jì) sums[3] = this.form.result ? // this.form.result為init初始化時(shí)從接口中拿到的總計(jì)，賦值到下標(biāo)為3的列上 sums[3] += '元' // 得到的總計(jì)后加上單位元
vue table表格合計(jì) ( Element )
<template>
<el-card class="box-card">
<!-- 只合計(jì)不做其他處理 -->
<h2>只合計(jì)不做其他處理</h2>
<el-table :data="tableData6" border show-summary style="width: 100%">
<el-table-column prop="id" label="ID" width="180" align="center">
</el-table-column>
<el-table-column prop="name" label="產(chǎn)品" align="center">
</el-table-column>
<el-table-column prop="number" label="數(shù)量" align="center">
</el-table-column>
<el-table-column prop="price" label="價(jià)格" align="center">
</el-table-column>
<el-table-column prop="profit" label="利潤(rùn)率" align="center">
</el-table-column>
</el-table>
<!-- 簡(jiǎn)單求和實(shí)例處理 -->
<h2 style="margin-top:100px">簡(jiǎn)單求和實(shí)例處理</h2>
<el-table :data="tableData6" border :summary-method="getSummaries01" show-summary style="width: 100%;">
<el-table-column prop="id" label="ID" width="180" align="center">
</el-table-column>
<el-table-column prop="name" label="產(chǎn)品" align="center">
</el-table-column>
<el-table-column prop="number" label="數(shù)量" align="center">
</el-table-column>
<el-table-column prop="price" label="價(jià)格" align="center">
</el-table-column>
<el-table-column prop="profit" label="利潤(rùn)率" align="center">
</el-table-column>
</el-table>
<!-- 指定列求和實(shí)例處理 -->
<h2 style="margin-top:100px">指定列求和實(shí)例處理</h2>
<el-table :data="tableData6" border :summary-method="getSummaries02" show-summary style="width: 100%;">
<el-table-column prop="id" label="ID" width="180" align="center">
</el-table-column>
<el-table-column prop="name" label="產(chǎn)品" align="center">
</el-table-column>
<el-table-column prop="number" label="數(shù)量" align="center">
</el-table-column>
<el-table-column prop="price" label="價(jià)格" align="center">
<template slot-scope="scope">
{{$utils.formSum(scope.row.price, 2, '.', ',')}}
</template>
</el-table-column>
<el-table-column prop="profit" label="利潤(rùn)率" align="center">
<template slot-scope="scope">
{{Number(scope.row.profit).toFixed(2)}} %
</template>
</el-table-column>
</el-table>
</el-card>
</template>
<script>
export default {
data() {
return {
tableData6: [{
id: '12987122',
name: '襪子',
number: '234',
price: '3',
profit: '10.9'
}, {
id: '12987123',
name: '鞋子',
number: '165',
price: '343.8',
profit: '12.00'
}, {
id: '12987124',
name: '褲子',
number: '324',
price: '249.0',
profit: '9'
}, {
id: '12987125',
name: '腰帶',
number: '621',
price: '342.0',
profit: '17.00'
}, {
id: '12987126',
name: '手鐲',
number: '539',
price: '43421',
profit: '153333'
}]
};
},
methods: {
//格式化數(shù)字，格式化金額
// formSum: function(number, decimals, dec_point, thousands_sep) {
// /*
// * 參數(shù)說明：
// * number：要格式化的數(shù)字
// * decimals：保留幾位小數(shù)
// * dec_point：小數(shù)點(diǎn)符號(hào)
// * thousands_sep：千分位符號(hào)
// * */
// number = (number + '').replace(/[^0-9+-Ee.]/g, '');
// var n = !isFinite(+number) ? 0 : +number,
// prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
// sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
// dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
// s = '',
// toFixedFix = function(n, prec) {
// var k = Math.pow(10, prec);
// return '' + Math.ceil(n * k) / k;
// };
// s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
// var re = /(-?\d+)(\d{3})/;
// while (re.test(s[0])) {
// s[0] = s[0].replace(re, "$1" + sep + "$2");
// }
// if ((s[1] || '').length < prec) {
// s[1] = s[1] || '';
// s[1] += new Array(prec - s[1].length + 1).join('0');
// }
// return s.join(dec);
// }
/**
* 將show-summary設(shè)置為true就會(huì)在表格尾部展示合計(jì)行。
* 默認(rèn)情況下，對(duì)于合計(jì)行，第一列不進(jìn)行數(shù)據(jù)求合操作，
* 而是顯示「合計(jì)」二字（可通過sum-text配置），
* 其余列會(huì)將本列所有數(shù)值進(jìn)行求合操作，并顯示出來。
* 當(dāng)然，你也可以定義自己的合計(jì)邏輯。
* 使用summary-method并傳入一個(gè)方法，返回一個(gè)數(shù)組，
* 這個(gè)數(shù)組中的各項(xiàng)就會(huì)顯示在合計(jì)行的各列中，具體可以參考本例中的第二個(gè)表格。
*/
//簡(jiǎn)單求和實(shí)例處理
getSummaries01(param) {
const {
columns,
data
} = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '總價(jià)';
return;
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
} else {
sums[index] = 'N/A';
}
});
return sums;
},
//指定列求和實(shí)例處理
getSummaries02(param) {
const {
columns,
data
} = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '總價(jià)';
} else if (index === 3) { //對(duì)價(jià)格做處理：保留兩位小數(shù)
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] = this.$utils.formSum(sums[index], 2, '.', ',');
} else {
sums[index] = '/';
}
} else if (index === 4) { //對(duì)利潤(rùn)率做處理：保留兩位小數(shù)
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] = sums[index].toFixed(2);
sums[index] += ' %';
} else {
sums[index] = '/';
}
} else {
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
} else {
sums[index] = '/';
}
}
});
return sums;
}
}
};
</script>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中update:modelValue的使用與不生效問題解決
現(xiàn)在vue3的使用越來越普遍了,vue3這方面的學(xué)習(xí)我們要趕上,下面這篇文章主要給大家介紹了關(guān)于vue3中update:modelValue的使用與不生效問題的解決方法,需要的朋友可以參考下2022-03-03
elementUI Vue 單個(gè)按鈕顯示和隱藏的變換功能(兩種方法)
小編最近遇到這樣的需求，當(dāng)點(diǎn)擊一個(gè)按鈕可以變換里面字的內(nèi)容，剛開始還真是一頭霧水，不知所措。仔細(xì)想想屢屢思緒，很容易的解決了。接下來通過本文給大家介紹elementUI Vue 單個(gè)按鈕顯示和隱藏的變換功能,需要的朋友可以參考下2018-09-09
Element中el-input密碼輸入框?yàn)g覽器自動(dòng)填充賬號(hào)密碼問題的解決方法
自己寫了一個(gè)管理系統(tǒng),登錄成功之后,瀏覽器提示我保存賬號(hào)密碼,每次登錄時(shí)就會(huì)自動(dòng)回填記住的賬號(hào)密碼,方便用戶快速登錄,下面這篇文章主要給大家介紹了關(guān)于Element中el-input密碼輸入框?yàn)g覽器自動(dòng)填充賬號(hào)密碼問題的解決方法,需要的朋友可以參考下2022-09-09
Vuejs第一篇之入門教程詳解（單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)）
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。接下來給大家介紹vuejs單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)的相關(guān)知識(shí)，非常不錯(cuò)，感興趣的朋友一起看看吧2016-09-09
詳解Vue如何實(shí)現(xiàn)自定義動(dòng)畫與動(dòng)畫效果設(shè)計(jì)
在Vue中，動(dòng)畫效果是非常有用的，它可以使用戶界面變得更加生動(dòng)、有趣，本文中我們將學(xué)習(xí)如何在Vue中進(jìn)行自定義動(dòng)畫與動(dòng)畫效果設(shè)計(jì)，感興趣的可以了解一下2023-06-06
這篇文章主要給大家介紹了關(guān)于Vue3中導(dǎo)航守衛(wèi)的基本使用方法,正如其名vue-router?提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航,下面需要的朋友可以參考下2023-03-03
本文詳細(xì)介紹了VueRouter 路由的概念、規(guī)則、基礎(chǔ)等相關(guān)內(nèi)容，文中運(yùn)用大量的圖片進(jìn)行講解，感興趣的小伙伴可以看一看這篇文章2021-08-08
vuex實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
element-ui?tree?異步樹實(shí)現(xiàn)勾選自動(dòng)展開、指定展開、指定勾選功能
這篇文章主要介紹了element-ui?tree?異步樹實(shí)現(xiàn)勾選自動(dòng)展開、指定展開、指定勾選,項(xiàng)目中用到了vue的element-ui框架，用到了el-tree組件，由于數(shù)據(jù)量很大，使用了數(shù)據(jù)懶加載模式，即異步樹，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue中的watch和computed的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11