Vuetify：v-数据表标题 （新线）

Question

我正在使用 Vue.js(2.6.11) 和 Vuetify(2.4.0)。
下面的代码是我的缩写代码。

        <v-data-table
          :headers="headers"
          :items="items"
          :items-per-page="itemsPerPage"
          hide-default-footer
          class="elevation-1"></v-data-table>
          
=============================================================   
data() {
    return {
      page: 1,
      pageCount: 0,
      itemsPerPage: 10,
      headers: [
        { text: 'Calories\n(per 100g)', align: 'center', sortable: false, value: 'calories' },
        { text: 'Protein\n(per 100g)', align: 'center', sortable: false, value: 'protein' },
        { text: 'Carbohydrates\n(per 100g)', align: 'center', sortable: false, value: 'carbohydrates' },
      ],
      items: [],
    };
  },  

我写 （新行）在每个标题中，但它不起作用。
有人知道如何让它发挥作用吗？

Answer 1

重点是，如果不在

\n

标签中，

<pre>

将显示为空白， 所以只能用插槽

<v-data-table
  headers="headers"
  items="items"
  items-per-page="itemsPerPage"
  hide-default-footer
  class="elevation-1">
  <template v-slot:header.calories="{ header }">
    Calories<br>new line
  </template>
</v-data-table>

v-slot:header.calories

卡路里 是您的标题字段之一