时间戳

首页 > 解决方案 > Vuetify 数据表添加总计行

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

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

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

标签： vue.jsdatatablevuetify.js

解决方案

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>

推荐阅读