Vuetify v-data-table 仅居中对齐一列答案

【问题标题】：Vuetify v-data-table align center only one columnVuetify v-data-table 仅居中对齐一列
【发布时间】：2020-06-12 15:41:48
【问题描述】：

我有：

    <v-data-table :headers="headers" :items="tableData" :items-per-page="5" class="elevation-1">

        <template v-slot:item.id="{ item }">
            {{item.id}}
        </template>

如何将该列的内容垂直居中对齐？

【问题讨论】：

标签： vue.js vuejs2 vue-component vuetify.js v-data-table

【解决方案1】：

您可以在headers 定义中指定每个列设置align 的对齐方式等于center。例如：

headers: [
  {
    text: 'Dessert (100g serving)',
    align: 'center',
    sortable: false,
    value: 'name',
  },
  { text: 'Calories', value: 'calories' },
  { text: 'Fat (g)', value: 'fat' },
  { text: 'Carbs (g)', value: 'carbs' },
  { text: 'Protein (g)', value: 'protein' },
  { text: 'Iron (%)', value: 'iron' },
],

如果这在您的配置中不起作用，请尝试同时删除插槽模板。

【讨论】：

【解决方案2】：

尝试用类名d-flex justify-center 的div 包装该内容，如下所示：

<template v-slot:item.id="{ item }">
            <div class="d-flex justify-center">{{item.id}}</div>
        </template>

【讨论】：