html - 为什么 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

表格总是试图最好地适应内容，因此如果您的列包含一行文本很长，该列将占用更多空间。

您可以在标题中使用宽度属性来获得固定宽度，如图所示 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
}