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

对于那些像我一样从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 2

尝试像Ohgodwhy注释一样，将<v-layout justify-center></v-layout>和<td></td>包裹起来。

那将是：

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

这是一个简化的代码段，它仅使用css类<td>而不是整个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>

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

3 个答案: