Element-UI是餓了么前端團隊推出的一款基於Vue.js 2.0 的桌面端UI框架，其功能較為完善，根據其文檔與demo學習，非常容易上手，但是我在使用其tabel組件時，發現我的功能 需求並不適用官網給出的demo，於是進行了修改。
需求描述：只將數量列進行合計，其他行不用合計
出現問題：公眾號列出現並不想出現的合計數
根據官網的demo，只要列中包含數字，不管你是否需要，都會進行合計並顯示。
修改后功能圖片：
修改后的代碼：
1
2
附代碼：
template：
<el-table
:data="wx_attention_list"
border
stripe
show-summary
:summary-method="getTotal"
style="width: 65%;margin:80px auto 15px auto;"
>
<el-table-column
prop="number"
label="序號"
width="100"
>
</el-table-column>
<el-table-column
prop="wx_key_word"
label="公眾號"
>
</el-table-column>
<el-table-column
prop="num"
label="數量"
>
</el-table-column>
</el-table>
methods：
getTotal(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 (column.property === 'num') {
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] = '--';
}
});
return sums;
}