Vuetify 数据表添加总计行答案

【问题标题】：Vuetify datatable add totals rowVuetify 数据表添加总计行
【发布时间】：2020-03-22 00:10:25
【问题描述】：

我正在尝试使用此框架添加总计行，但似乎没有考虑到它。我发现的唯一方法是这样做，但方法不正确......

<v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  >
    <template slot="footer">
      <tr>
          <th></th>
          <th>150</th>
          <th>260</th> 
          <th>150</th>
          <th>260</th> 
        <th></th>
      </tr>
    </template>
</v-data-table>

查看此代码笔以查看结果：

https://codepen.io/slayerbleast/pen/KKKjWjP

页脚就像另一个表格，而不是重复使用相同的列。

知道如何解决这个问题吗？

【问题讨论】：

标签： vue.js datatable vuetify.js

【解决方案1】：

您必须为此使用body.append 插槽。

所以它会是这样的：

<v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  >
    <template slot="body.append">
      <tr>
          <th>Total</th>
          <th>150</th>
          <th>260</th> 
          <th>150</th>
          <th>260</th>
          <th>33%</th>
      </tr>
</template>

【讨论】：