Vuejs2 Vue，Vuetify 2，v-data-table-如何在表格底部显示总原始数据

我正在使用v-data-table（Vuetify 2.x），并希望执行以下操作

固定桌子的整行

使总数始终可见

将总行的宽度调整为与标题相同

我试图对上述项目进行编码，但没有成功。 对于#3，我编码为使用

v-slot:footer

，但我无法调整总行的长度。 这是密码

<div id="app">
  <v-app>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :sort-by="['calories', 'fat']"
      :sort-desc="[false, true]"
      multi-sort
      class="elevation-1"
      :height="300"
    >
      <template v-slot:footer>
        <tr>
          <td style="font-weight:bold">total</td>
          <td style="font-weight:bold">{{ total.calories }}</td>
          <td style="font-weight:bold">{{ total.fat }}</td>
        </tr>
     </template>
    </v-data-table>
  </v-app>
</div>

当我使用

时，我无法使总数始终可见（#2）

---

如何对上述项目进行编码？

页脚槽不是实际

槽的一部分。使用

body append

插槽添加额外的行：

<template v-slot:body.append>
  <tr class="sticky-table-footer">
    <td v-text="'Total'" />
    <td v-text="total.calories" />
    <td v-text="total.fat" />
  </tr>
</template>

---

不要再使用内联样式。您无法在不同的响应时间间隔轻松覆盖它。此外，您应该尽可能地保留代码。

页脚槽不是实际的

槽的一部分。使用

body append

插槽添加额外的行：

<template v-slot:body.append>
  <tr class="sticky-table-footer">
    <td v-text="'Total'" />
    <td v-text="total.calories" />
    <td v-text="total.fat" />
  </tr>
</template>

---

不要再使用内联样式。您无法在不同的响应时间间隔轻松覆盖它。此外，您应该尽可能保留代码。

请将代码添加到问题本身，而不是代码谢谢您的回答。我添加了代码。请将代码添加到问题本身，而不是代码谢谢您的回答。我添加了代码。非常感谢！！我不知道干，所以我会保持我的代码尽可能干燥。你使用

v-text

而不是

{}

，那么你认为使用

v-text

更好吗

{}

，对吗？保持代码干燥意味着：只要有可能，编写代码，这样如果你想更改某个东西，你只需在一个地方更改它，它就会在你使用它的地方神奇地更新。如果我决定使总行不加粗，我只更改1行，而不是3行。至于

{{}

：这是一件小事，更多的是个人喜好。在少数情况下，您的应用程序会失败，从而向用户显示未解析的vue模板。您希望用户看到什么？没有（这是

v-text=“foo”

将呈现的内容）或

{{foo}}

（这是胡子语法将呈现的内容）？谢谢。正如你所说，我已经明白了。DRY在编写代码方面有很多优点。我的团队正在使用

{{}

，因此我将调整我的团队使用

{{}

。非常感谢！！我不知道干，所以我会保持我的代码尽可能干燥。你使用

v-text

而不是

{}

，那么你认为使用

v-text

更好吗

{}

，对吗？保持代码干燥意味着：只要有可能，编写代码，这样如果你想更改某个东西，你只需在一个地方更改它，它就会在你使用它的地方神奇地更新。如果我决定使总行不加粗，我只更改1行，而不是3行。至于

{{}

：这是一件小事，更多的是个人喜好。在少数情况下，您的应用程序会失败，从而向用户显示未解析的vue模板。您希望用户看到什么？没有（这是

v-text=“foo”

将呈现的内容）或

{{foo}}

（这是胡子语法将呈现的内容）？谢谢。正如你所说，我已经明白了。DRY在编写代码方面有很多优点。我的团队正在使用

{{}

，因此我将调整我的团队以使用

{{}

。