Question

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

<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>

请参阅此codepen以查看结果：

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

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

有什么解决方法吗？

Answer 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>

Vuetify数据表添加总计行

1 个答案: