水平對齊<v-data-table>來自 Vuetify

Question

我有下表，其中我無法對齊某些項目，例如復選框和操作：

這是表：

<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。

Answer 1

嘗試用<td></td>包裹<v-layout justify-center></v-layout> <td></td>就像 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>

Answer 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;
}

希望這可以幫助！

編輯 - 確保此樣式不在作用域組件中。

Answer 3

這是一個簡化的片段，它迭代<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>