Почему таблицы Vuetify показывают несовместимую ширину ячеек? - PullRequest
Новая
       8

Почему таблицы Vuetify показывают несовместимую ширину ячеек?

1 голос
/ 08 октября 2019

В Vue я создал несколько таблиц в шаблоне одного компонента. Все эти таблицы имеют одинаковый HTML-шаблон, за исключением того, что они используют различное свойство data (). Каким-то образом ширина столбца между ними несовместима. 

<template>
    <v-container>
        <h2>Security</h2>
        <hr>
        <v-simple-table>
            <template v-slot:default>
                <tbody>
                <tr v-for="(a, index) in user_info.security_titles"
                    :key="a">
                    <td><strong>{{ a }}</strong></td>
                    <td v-show="user_info.security_data">{{user_info.security_data[index]}}</td>
                </tr>
                </tbody>
            </template>
        </v-simple-table>
        <br>
        <h2>Connection</h2>
        <hr>
        <v-simple-table>
            <template v-slot:default>
                <tbody>
                <tr v-for="(b, index) in user_info.connection_titles"
                    :key="b">
                    <td> <strong>{{ b }}</strong> </td>
                    <td v-show="user_info.connection_data">{{user_info.connection_data[index]}}</td>
                </tr>
                </tbody>
            </template>
        </v-simple-table>
        <br>
        <h2>Language</h2>
        <hr>
        <v-simple-table>
            <template v-slot:default>
                <tbody>
                <tr v-for="(c, index) in user_info.language_titles"
                    :key="c">
                    <td> <strong>{{ c }}</strong> </td>
                    <td v-show="user_info.language_data">{{user_info.language_data[index]}}</td>
                </tr>
                </tbody>
            </template>
        </v-simple-table>
    </v-container>
</template>

Я использовал любой стиль

enter image description here

1 Ответ

1 голос
/ 08 октября 2019

Таблица всегда старается вписаться в содержимое наиболее хорошо, поэтому, если ваш столбец содержит строку с длинным текстом, этот столбец займет больше места.

Вы можете использовать свойство width в ваших заголовках, чтобы иметь фиксированную ширину, как показано в документах 

{
  text: string
  value: string
  align?: 'start' | 'center' | 'end'
  sortable?: boolean
  filterable?: boolean
  divider?: boolean
  class?: string | string[]
  width?: string | number
  filter?: (value: any, search: string, item: any) => boolean
  sort?: (a: any, b: any) => number
}
...