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

Question

我有一个数据table (vuetify 2.1.12)，槽="items" 和槽="footer"。在页脚中，我不想显示某些列的总和。 "problem" 是页脚中的列与 table 中的列完全不一致。

基本上我在数据中这样做 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 根本不在同一个地方。

那么...如何实现呢？

Answer 1

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

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

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

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

Vuetify Align footer columns with table columns in data table

datatable

footer

vue.js

vuetify.js