为什么Vuetify表显示的单元格宽度不一致？

Question

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

我使用过任何样式

Answer 1

表始终尝试最合适地适合内容，因此，如果您的列包含长文本行，则该列将占用更多空间。

您可以在标头中使用width属性，使其具有固定宽度，如in the docs

{
  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
}