vue element表格合计问题
vue element计算表格合计问题
问题:当表格的el-table-column标签下的属性prop属性值为‘对象.属性’时,将不能自动合计。
例如:
<el-table border v-loading="loading2" :data="dataBill" style="width: 100%;text-align:left;" show-summary height="720" > <el-table-column type="index" label="序号" width="90" align="center"></el-table-column> <el-table-column prop="statisticsDate" label="日期" align="center"></el-table-column> <el-table-column prop="order.count" label="订单数量" align="center"></el-table-column> <el-table-column prop="order.total" label="合计金额" align="center"></el-table-column> </el-table>
这里的订单数量和合计金额将不能自动合计。
解决思路:把 porp属性值修改为属性格式(prop:“count”)。怎么修改呢????
实现方法:遍历循环修改。具体如下
for (var i = 0; i < data.length; i++) { data[i].orderCount = data[i].order.count; data[i].orderTotal = data[i].order.total; }
最后把订单数量和合计金额的 prop修改如下,就能自动合计啦
<el-table-column prop="orderCount" label="订单数量" align="center"></el-table-column> <el-table-column prop="orderTotal" label="合计金额" align="center"></el-table-column>
转载地址:https://blog.csdn.net/weixin_42857055/article/details/99624826