一、表格合计的自动生成
通过element-ui 表格组件的合计属性,即可自动生成合计行:
<el-table ref="table" :data="orderDetail" stripe border show-summary style="width: 100%; margin-top:20px">
<el-table-column width="100px" prop="orderNo" label="订单号" />
<el-table-column width="80px" prop="orderItem" label="订单行" />
<el-table-column width="150px" prop="materialCode" label="物料编码" />
<el-table-column :show-overflow-tooltip="true" prop="materialName" label="物料名称" />
<el-table-column :show-overflow-tooltip="true" prop="materialModel" label="型号" />
<el-table-column :show-overflow-tooltip="true" prop="materialStd" label="规格" />
<el-table-column :show-overflow-tooltip="true" width="80px" prop="qty" label="数量">
</el-table-column>
<el-table-column width="50px" prop="currency" label="币别">
</el-table-column>
<el-table-column width="80px" prop="price" label="单价">
</el-table-column>
<el-table-column width="100px" prop="amount" label="金额">
</el-table-column>
</el-table>
二、表格合计的自定义方法
我们希望只对金额这一列生成合计值:
使用summary-method方法自定义合计计算方法
<el-table ref="table" :data="orderDetail" stripe border show-summary :summary-method="getSumAmount" style="width: 100%; margin-top:20px">
<el-table-column width="100px" prop="orderNo" label="订单号" />
<el-table-column width="80px" prop="orderItem" label="订单行" />
<el-table-column width="150px" prop="materialCode" label="物料编码" />
<el-table-column :show-overflow-tooltip="true" prop="materialName" label="物料名称" />
<el-table-column :show-overflow-tooltip="true" prop="materialModel" label="型号" />
<el-table-column :show-overflow-tooltip="true" prop="materialStd" label="规格" />
<el-table-column :show-overflow-tooltip="true" width="80px" prop="qty" label="数量">
</el-table-column>
<el-table-column width="50px" prop="currency" label="币别">
</el-table-column>
<el-table-column width="80px" prop="price" label="单价">
</el-table-column>
<el-table-column width="100px" prop="amount" label="金额">
</el-table-column>
</el-table>
getSumAmount(param) {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
// 首列标题
if (index === 0) {
sums[index] = '合计:'
// 只合计金额这一列
} else if (index === 9) {
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] = 'N/A'
}
} else {
sums[index] = ''
}
})
return sums
}