如何让Vuetify v-data-table指定列内容垂直居中？

Got it! Let's fix that vertical alignment for your ID column in Vuetify's v-data-table. There are a couple of straightforward ways to do this:

Method 1: Use Vuetify's Built-in Flex Classes #

Vuetify comes with handy flex utility classes that make alignment easy. Just wrap your ID column content in a container and apply the right classes:

<v-data-table :headers="headers" :items="tableData" :items-per-page="5" class="elevation-1">
  <template v-slot:item.id="{ item }">
    <!-- Wrap content in a div with flex alignment classes -->
    <div class="d-flex align-center" style="height: 100%;">
      {{ item.id }}
    </div>
  </template>
</v-data-table>

• d-flex turns the div into a flex container
• align-center centers the content vertically within the container
• height: 100% ensures the div takes up the full height of the table cell, so the alignment works properly across all row heights

Method 2: Custom CSS for Targeted Alignment #

If you prefer a more global approach or need to avoid extra markup, you can target the ID column directly with CSS:

First, add a custom class to your data table:

<v-data-table 
  :headers="headers" 
  :items="tableData" 
  :items-per-page="5" 
  class="elevation-1 custom-id-table"
>
  <template v-slot:item.id="{ item }">
    {{ item.id }}
  </template>
</v-data-table>

Then add this CSS (either in your component's <style> tag or global stylesheet):

/* Target the ID column specifically using its column identifier */
.custom-id-table .v-data-table__cell[data-table-column-id="id"] {
  display: flex;
  align-items: center;
  height: 100%;
}

This method is more robust if you might reorder columns later—since it targets the column by its id value instead of its position, it'll keep working even if the ID column moves.

内容的提问来源于stack exchange，提问作者farahm