如何获取总和并将其显示在 vuetify 数据表中答案

【问题标题】：how to take sum and display it in vuetify datatable如何获取总和并将其显示在 vuetify 数据表中
【发布时间】：2018-07-13 18:38:13
【问题描述】：

大家好，我是 Vue 的新手。请帮助我，我正在使用 vue2、vuetify 0.17 和数据表组件。我的问题是我想从数据中获取面积总和、楼层列。我使用 map 函数计算了运行总数并将其存储在 total{'area' : 100, 'floor':7} 中。现在在页脚中我想显示总数。

<v-data-table
v-bind:headers="listData.columnProperty"
v-bind:items="listData.data"
v-bind:search="search"
:totals="{area : 100, flat : 7}" //is it allowed
>
<template slot="footer" slot-scope="totals">
Footer {{ totals}} {{ totals['area']}}
</template>

请分享任何创建总计并将其显示在页脚中的示例。我非常需要它。

【问题讨论】：

github.com/vuetifyjs/vuetify/issues/2474 在这种情况下，我们如何在页脚中显示总计？应该有办法
使用body.append 插槽，如下所示stackoverflow.com/questions/60951401/…

标签： vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

你说你已经在totals 中计算了它，所以这行得通吗？

<template slot="footer">
    <td><strong>Sum</strong></td>
    <td class="text-xs-right">{{ totals.area }}</td>
    <td class="text-xs-right">{{ totals.flat }}</td> 
</template>

（不确定你桌子的其他部分看起来如何，但也许你明白了）

【讨论】：