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

Posted 2023-02-22

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

【英文标题】：How to put a title in the first column using Vuetify.js's v-simple-table?

【发布时间】：2021-02-11 10:56:58

【问题描述】：

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

我使用 codesandbox 创建了以下代码并检查了屏幕。 如下图所示，标题显示不对齐。 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,
        ,        
      ],
    
  ,
)

输出图片↓

谁能给我建议？

【问题讨论】：

好吧。你在 tbody 中有三列，而在 thead 中只有两列 - 只需在 thead 中添加一列就可以满足你的要求 - <th> </th> （非中断空间，因为表格可能很奇怪空单元格 - 但可能不需要 - 不会伤害

其实我也试过了……你只需要<th/><th class="text-left">Name</th>之前就可以了

非常感谢您的回答！我真的很感激！

如果您有任何时间，请给我您的评论作为答案，我愿意解决。

【参考方案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>