Vuetify 中 <v-data-table> 中的水平对齐答案

【问题标题】：Horizontal alignment in <v-data-table> from VuetifyVuetify 中 <v-data-table> 中的水平对齐
【发布时间】：2018-10-10 19:53:42
【问题描述】：

我在下表中无法对齐某些项目，例如复选框和操作：

这是桌子：

<v-data-table
        :headers="headers"
        :items="users"
        hide-actions
        class="elevation-1"
>
    <template slot="items" slot-scope="props">
        <td>{{ props.item.email }}</td>
        <td class="text-xs-left">{{ props.item.empresa.descripcion}}</td>
        <v-checkbox disabled v-model="props.item.isAdmin"></v-checkbox> 
        <td class="text-xs-left">{{ props.item.createdAt }}</td>
        <td class="justify-center layout px-0">
            <v-icon
                    small
                    class="mr-2"
                    @click="editItem(props.item)"
            >
                Editar
            </v-icon>
            <v-icon
                    small
                    left
                    class="mr-2"
                    @click="deleteItem(props.item)"
            >
                Eliminar
            </v-icon>
        </td>
    </template>
</v-data-table>

我需要对齐v-checkbox 和v-icon。

<style> 部分中没有 css。

【问题讨论】：

用<v-layout justify-center></v-layout>包装它们
@Ohgodwhy 究竟如何？我得到了这个奇怪的结果：imgur.com/uudHL3I pastebin.com/uDfUQNzF

标签： vue.js vuetify.js

【解决方案1】：

试试用 <td></td> 包裹 <v-layout justify-center></v-layout>，就像 Ohgodwhy 评论一样。

应该是这样的：

<v-data-table
        :headers="headers"
        :items="users"
        hide-actions
        class="elevation-1"
>
    <template slot="items" slot-scope="props">
        <td>
            <v-layout justify-center>
                {{ props.item.email }}
            </v-layout>
        </td>
        <td>
            <v-layout justify-center>
                {{ props.item.empresa.descripcion}}
            </v-layout>
        </td>
        <td>
            <v-layout justify-center>
                <v-checkbox disabled v-model="props.item.isAdmin"></v-checkbox>
            </v-layout>
        </td>
        <td>
            <v-layout justify-center>
                {{ props.item.createdAt }}
            </v-layout>
        </td>
        <td>
            <v-layout justify-center>
                <v-icon
                    small
                    class="mr-2"
                    @click="editItem(props.item)"
                >
                    Editar
                </v-icon>
                <v-icon
                    small
                    left
                    class="mr-2"
                    @click="deleteItem(props.item)"
                >
                    Eliminar
                </v-icon>
            </v-layout>
        </td>
    </template>
</v-data-table>

【讨论】：

【解决方案2】：

对于那些像我一样从 Vuetify 文档中举一个简单示例的人：

<v-card>
 <v-card-title id="balloon-title">Balloon Info - tracking [balloon ID]</v-card-title>
 <v-data-table disable-sort dense hide-default-footer :headers="headers" :items="info" item-key="name">
 </v-data-table>
</v-card>

上述解决方案要求您更改整个布局。相反，我将td 选择器设置为这样

td {
  text-align: center !important;
}

希望这会有所帮助！

编辑-确保此样式不在作用域组件中。

【讨论】：

【解决方案3】：

这是一个简化的 sn-p 迭代 <td> 而不是指定每个 prop，只使用 css 类 text-center 而不是整个 v-layout 组件：

<v-data-table
  item-key="yourItemKey"
  :items="dataSet" 
  :headers="headers">

  <!-- item is the row itself with the column values -->
  <template v-slot:item="{ item }">
      <tr>
          <td v-for="(val, key) in item" :key="key" class="text-center">
              {{ val }}
          </td>
      </tr>
  </template>

</v-data-table>

【讨论】：