vue表格(table)計算總計方式
vue 表格計算總計
<el-table v-loading="loading" :summary-method="getSummaries" show-summary :data="abcList" border tooltip-effect="darkTable" >
首先需要在table標簽中添加
:summary-method="getSummaries" // 調用方法
show-summary //標簽屬性
methods: {
getSummaries(param) {
const { columns, data } = param
console.log(columns, data, 'columns,data')
const sums = []
columns.forEach((column, index) => {
// 設置第一列的值為總計
if (index === 0) {
sums[index] = '總計'
return
}
sums[3] = this.form.result
sums[3] += '元'
})
return sums
}
}
因為Element上計算總計的方法是計算當前頁上金額的總和，稍加修改~
sums[index] = '總計' // 把下標為0的列賦值為總計 sums[3] = this.form.result // this.form.result為init初始化時從接口中拿到的總計，賦值到下標為3的列上 sums[3] += '元' // 得到的總計後加上單位元
vue table表格合計 ( Element )
<template>
<el-card class="box-card">
<!-- 隻合計不做其他處理 -->
<h2>隻合計不做其他處理</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="產品" align="center">
</el-table-column>
<el-table-column prop="number" label="數量" align="center">
</el-table-column>
<el-table-column prop="price" label="價格" align="center">
</el-table-column>
<el-table-column prop="profit" label="利潤率" align="center">
</el-table-column>
</el-table>
<!-- 簡單求和實例處理 -->
<h2 style="margin-top:100px">簡單求和實例處理</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="產品" align="center">
</el-table-column>
<el-table-column prop="number" label="數量" align="center">
</el-table-column>
<el-table-column prop="price" label="價格" align="center">
</el-table-column>
<el-table-column prop="profit" label="利潤率" align="center">
</el-table-column>
</el-table>
<!-- 指定列求和實例處理 -->
<h2 style="margin-top:100px">指定列求和實例處理</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="產品" align="center">
</el-table-column>
<el-table-column prop="number" label="數量" align="center">
</el-table-column>
<el-table-column prop="price" label="價格" align="center">
<template slot-scope="scope">
{{$utils.formSum(scope.row.price, 2, '.', ',')}}
</template>
</el-table-column>
<el-table-column prop="profit" label="利潤率" 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: {
//格式化數字，格式化金額
// formSum: function(number, decimals, dec_point, thousands_sep) {
// /*
// * 參數說明：
// * number：要格式化的數字
// * decimals：保留幾位小數
// * dec_point：小數點符號
// * thousands_sep：千分位符號
// * */
// 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設置為true就會在表格尾部展示合計行。
* 默認情況下，對於合計行，第一列不進行數據求合操作，
* 而是顯示「合計」二字（可通過sum-text配置），
* 其餘列會將本列所有數值進行求合操作，並顯示出來。
* 當然，你也可以定義自己的合計邏輯。
* 使用summary-method並傳入一個方法，返回一個數組，
* 這個數組中的各項就會顯示在合計行的各列中，具體可以參考本例中的第二個表格。
*/
//簡單求和實例處理
getSummaries01(param) {
const {
columns,
data
} = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '總價';
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;
},
//指定列求和實例處理
getSummaries02(param) {
const {
columns,
data
} = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '總價';
} else if (index === 3) { //對價格做處理：保留兩位小數
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) { //對利潤率做處理：保留兩位小數
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>
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。
推薦閱讀：
- Vue使用ElemenUI對table的指定列進行合算的方法
- ElementUI對table的指定列進行合算
- vue3+el-table實現行列轉換
- Element UI中table單元格合並的解決過程
- vue + element動態多表頭與動態插槽