如何在 v-data-table 中指定可编辑的列权重？

Question

我有一个类似的 table 如下截图所示：

我想要实现的是为这个 table 中的每个数字列分配一个权重，即分配给名为“卡路里”、“脂肪”、“碳水化合物”、“蛋白质”的列, 和“铁”。更具体地说，应该可以在单独的 header 行中输入权重（这应该留给 table 用户，即应该是 editable）列值相乘，然后相加到单独列中的加权和。

请参阅以下划痕以进一步说明。

这可以用 v-data-table 实现吗？任何人都可以为 editable header 行提供指导甚至 MWE，以便对数字 table 数据进行加权求和吗？

Answer 1

您可以在带有插槽的实际数据之前添加额外的一行：body.prepend

您的模板可能如下所示：

<div id="app">
  <v-app id="inspire">
    <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1">
      <template #body.prepend>
        <tr class="">
          <td class="text-start"></td>
          <td class="text-start"><input class="red--text" value=1></td>
          <td class="text-start"><input class="red--text" value=1></td>
          <td class="text-start"><input class="red--text" value=1></td>
          <td class="text-start"><input class="red--text" value=1></td>
          <td class="text-start"><input class="red--text" value=1></td>
        </tr>
      </template>
    </v-data-table>
  </v-app>
</div>

码笔：https://codepen.io/florent-bouisset/pen/QWaRqOy?editors=1010

您应该能够将输入绑定到数据并计算您想要的最后一列

如何在 v-data-table 中指定可编辑的列权重？

How to specify editable column weights in v-data-table?

javascript

vue.js

vuetify.js

v-data-table