如何在 Vuetify v-data-table 上对齐标题

Question

我的桌子上的标题有一个奇怪的问题，有些标题与顶部对齐，但其他标题不对齐，我尝试了所有方法甚至对齐：“左”，但没有成功，这是我的问题的图片

我的代码是这样的：

*桌子：

<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' },
            ]

谢谢！

Answer 1

我不想设置固定宽度，因此作为如何使用 CSS 解决此问题的示例：

.v-data-table-header th {
  white-space: nowrap;
}

相信此评论。

Answer 2

这通常是由于包含sortable图标（sortable默认情况下处于启用状态）引起的，可能与未设置width. 每个都是可以在您的情况下设置的属性header_data。

你可以：

• 使用sortable: falsein删除不需要的排序header_data
• 添加固定width在header_data适当
• 利用headerorheader.<name>插槽（例如将文本和图标包裹在 div 中并使用一些内置的 CSS flexbox 相关类）
• 创建一些自定义 CSS

前两个选项最简单，前提是您对它们提供的约束感到满意。自定义插槽选项，即header.<name>（见文档的API的插槽部分）是很容易实现，甚至对细胞的基础细胞。