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

Posted 2023-02-23

【中文标题】Vue, Vuetify 2, v-data-table - 如何在表格底部显示总原始数据

【英文标题】：Vue, Vuetify 2, v-data-table - How to show the total raw on the bottom of the table

【发布时间】：2020-08-20 01:04:35

【问题描述】：

我正在使用 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"
      :
    >
      <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>

  new Vue(
     el: '#app',
     vuetify: new Vuetify(),
     data () 
      return 
        headers: [
          
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'name',
          ,
           text: 'Calories', value: 'calories' ,
           text: 'Fat (g)', value: 'fat' ,
        ],
        desserts: [
          
            name: 'Frozen Yogurt',
            calories: 200,
            fat: 6.0,
          ,
          
            name: 'Ice cream sandwich',
            calories: 200,
            fat: 9.0,
          ,
          
            name: 'Eclair',
            calories: 300,
            fat: 16.0,
          ,
          
            name: 'Cupcake',
            calories: 300,
            fat: 3.7,
          ,
          
            name: 'Gingerbread',
            calories: 400,
            fat: 16.0,
          ,
          
            name: 'Jelly bean',
            calories: 400,
            fat: 0.0,
          ,
          
            name: 'Lollipop',
            calories: 400,
            fat: 0.2,
          ,
          
            name: 'Honeycomb',
            calories: 400,
            fat: 3.2,
          ,
          
            name: 'Donut',
            calories: 500,
            fat: 25.0,
          ,
          
            name: 'KitKat',
            calories: 500,
            fat: 26.0,
          ,
        ],
        total: 
          calories: 3600,
          fat: 105.1,
        ,
      
    ,
  )

https://codepen.io/UKanamo/pen/GRpyOEP

当我使用<template v-slot:body.append> 时，我无法使总数始终可见(#2)。

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

【问题讨论】：

请将代码添加到问题本身而不是 codepen

感谢您的回复。我添加了代码。

【参考方案1】：

footer 插槽不是实际<table> 的一部分。使用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>

https://codepen.io/andrei-gheorghiu/pen/KKdZrYg

注意：可用插槽的完整列表here。

要使您的页脚具有粘性，请添加以下 CSS：

.sticky-table-footer td 
  font-weight: bold;
  position: sticky;
  bottom: 0;
  background-color: white;
  border-top: thin solid rgba(0,0,0,.12);

不要再使用内联样式了。您无法在不同的响应时间间隔上轻松覆盖它。此外，您应该尽量保持您的代码为DRY。

【讨论】：

非常感谢！！我不知道 DRY，所以我会尽可能保持我的代码 DRY。你使用v-text而不是，那么你认为使用v-text更好，对吧？

保持代码干爽意味着：只要有可能，编写代码，这样如果你想改变某些东西，你只需要在一个地方改变它，它就会神奇地在你使用它的任何地方更新。如果我决定让总行不加粗，我只更改 1 行，而不是 3 行。至于：这是一件小事，更多的是个人喜好。在极少数情况下，您的应用程序会失败，以便将未解析的 vue 模板呈现给用户。你希望用户看到什么？什么都没有（这是v-text="foo" 将呈现的内容）或foo（这是胡子语法将呈现的内容）？

谢谢。正如你所说，我已经理解了 DRY。 DRY 在编写代码方面有很多优点。我的团队正在使用，因此我将调整我的团队以使用。