Как выровнять заголовки в Vuetify v-data-table - PullRequest
Новая
       27

Как выровнять заголовки в Vuetify v-data-table

3 голосов
/ 08 января 2020

У меня странная проблема с моим заголовком на моей таблице, некоторые заголовки выровнены по верху, а другие нет, я попробовал все, даже выровнял: 'left', но это не сработало, вот картинка моя проблема

enter image description here

И мой код такой:

* Таблица: 

<v-data-table :headers="header_data" :items="finalData" :search="search" u/click:row="showAlert">
                <template v-slot:item.aum="{ item }">
                    {{formatNumber(item.aum)}}
                </template>
            </v-data-table>

И данные за шапку: 

header_data: [
                { text: 'Name', value: 'fund', align: 'start' },
                { text: 'Ticker', value: 'ticker', align: 'start' },
                { text: 'Asset Class', value: 'assetclass', align: 'start' },
                { text: 'Provider', value: 'issuer', align: 'start' },
                { text: 'Geographic Focus', value: 'region', align: 'start' },
                { text: 'Investment focus', value: 'focus', align: 'start' },
                { text: 'AUM (USD)', value: 'aum', align: 'start' },
            ]

Спасибо!

1 Ответ

1 голос
/ 08 января 2020

Обычно это вызвано включением значка sortable (sortable включен по умолчанию), возможно, в сочетании с не установкой width. Каждое из них - это свойства, которые можно установить, в вашем случае, header_data.

. Вы можете:

  • Удалить сортировку там, где она не нужна, с помощью sortable: false в header_data
  • Добавьте фиксированный width в header_data, где это необходимо.
  • Используйте слоты header или header.<name> (например, чтобы обернуть текст и значок в div и использовать некоторые из * встроенные CSS классы, связанные с flexbox)
  • Создать несколько пользовательских CSS

Первые два варианта являются самыми простыми, если вы довольны предоставленными ограничениями. Настраиваемый параметр слота, т. Е. header.<name> (см. docs в разделе API слотов), довольно прост в реализации, даже для каждой ячейки.

...