Vuetify 将页脚列与数据表中的表列对齐

Question

我有一个带有 slot="items" 和 slot="footer" 的数据表（vuetify 2.1.12）。 在页脚中，我不想显示某些列的总和。 “问题”是页脚中的列与表格中的列完全不相符。

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

             <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 完全不同。

那么……如何实现呢？

Answer 1

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

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

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