如何使用 Vuetify.js 的 v-simple-table 在第一列中放置标题？

Question

我想使用 v-simple-tble，Vuetify.js 的一个 UI 组件，创建一个如下表所示的表格。

我使用 codeandbox 创建了以下代码并检查了屏幕。 如下图所示，标题显示不对齐。 HTML↓

    <div id="app">
  <v-app id="inspire">
    <v-simple-table>
      <template v-slot:default>
        <thead>
          <tr>
            <th class="text-left">
              Name
            </th>
            <th class="text-left">
              Calories
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="item in desserts"
            :key="item.name"
          > 
            <th>{{ item.id }}</th>
            <td>{{ item.name }}</td>
            <td>{{ item.calories }}</td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>
  </v-app>
</div>

Vue.js↓

    new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      desserts: [
        {
          id:1,
          name: 'Frozen Yogurt',
          calories: 159,
        },
        {
          id:2,
          name: 'Ice cream sandwich',
          calories: 237,
        },
        {
          id:3,
          name: 'Eclair',
          calories: 262,
        },
        {
          id:4,
          name: 'Cupcake',
          calories: 305,
        },
        {
          id:5,
          name: 'Gingerbread',
          calories: 356,
        },        
      ],
    }
  },
})

输出图像↓

有人可以建议我吗？

Answer 1

你在thead中只有两个“细胞”，但在tbody中有三个

只需在标题中添加另一个“单元格”

<v-simple-table>
  <template v-slot:default>
    <thead>
      <tr>
        <th /> <!-- added empty header to re-align columns -->
        <th class="text-left">
          Name
        </th>
        <th class="text-left">
          Calories
        </th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="item in desserts"
        :key="item.name"
      > 
        <th>{{ item.id }}</th>
        <td>{{ item.name }}</td>
        <td>{{ item.calories }}</td>
      </tr>
    </tbody>
  </template>
</v-simple-table>