v-data-table 가운데 정렬을 하나의 열만 표시

v-data-table 가운데 정렬을 하나의 열만 표시

나는 다음을 가지고 있다:

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

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

그 열의 내용을 수직으로 중앙에 정렬하려면 어떻게 해야 합니까?

각 열 설정의 정렬을 지정할 수 있습니다.align에 필적center당신의 안에서headers정의.예:

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' },
],

설정으로 동작하지 않는 경우는, 슬롯 템플릿도 삭제해 주세요.

그 내용을 다음 순서로 정리합니다.div클래스명을 붙여d-flex justify-center다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/60453353/vuetify-v-data-table-align-center-only-one-column