vue.js - Vuetify 数据表添加总计行

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

<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

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

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

最佳答案

为此，您必须使用 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>

关于vue.js - Vuetify 数据表添加总计行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59053219/