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

Posted 2023-02-23

【中文标题】为啥 Vuetify 表格显示不一致的单元格宽度？

【英文标题】：Why Vuetify tables shows inconsistent cells width?为什么 Vuetify 表格显示不一致的单元格宽度？

【发布时间】：2020-02-05 06:19:40

【问题描述】：

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

我用过任何风格

【参考方案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