Vuetify将页脚列与数据表中的表列对齐 [英] Vuetify Align footer columns with table columns in data table

问题描述

我有一个带有table = items和slot = footer的数据表（vuetify 2.1.12）。
在页脚中，我不想显示某些列的总和。
问题是页脚中的列与表中的列根本不符。

I have a datatable (vuetify 2.1.12) with slot="items" and slot="footer". In the footer I wan't to display the sum of some of the columns. The "problem" is that the columns in the footer are not at all in line with the columns in the table.

基本上我在数据中这样做表格：

basically I do this in the data table:

             <template v-slot:item="props">
                <tr>
                  <td>{{ props.item.qty }}</td>
                  <td>{{ props.item.qtyBoughtToday }}</td>
                  <td>{{ props.item.shortName }}</td>
                </tr>
              </template>
              <template slot="footer">
                <tr>
                  <td></td>
                  <td>{{ sumQtyBoughtToday }}</td>
                  <td></td>
                </tr>
             </template>

问题是页脚列 sumQtyBoughtToday根本不在同一位置列props.item.qtyBoughtToday。

The thing is that the footer column "sumQtyBoughtToday" does not end up in the same place at all as the column props.item.qtyBoughtToday.

那么...如何实现呢？

So...how to accomplish it?

推荐答案

我认为您正在寻找 body.append 插槽而不是页脚 ...

I think you're looking for the body.append slot instead of the footer...

 <template slot="body.append">
      <tr>
          <td></td>
          <td>{{ sumQtyBoughtToday }}</td>
          <td></td>
      </tr>
 </template>

示例： https://codeply.com/p/kIlxX2jTZ1

这篇关于Vuetify将页脚列与数据表中的表列对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！