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

Posted 2023-02-22

【中文标题】如何在 Vuetify v-data-table 上对齐标题

【英文标题】：How to align headers on Vuetify v-data-table

【发布时间】：2020-04-25 22:57:18

【问题描述】：

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

我的代码是这样的：

*表：

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

谢谢！

【参考方案1】：

我不想设置一个固定的宽度，所以作为一个如何用 CSS 解决这个问题的例子：

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

信用this comment。

【参考方案2】：

这通常是由于包含sortable 图标（sortable 默认打开），可能与未设置width 一起造成的。每个都是可以设置的属性，你的情况，header_data。

你可以：

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

前两个选项最简单，前提是您对它们提供的约束感到满意。自定义插槽选项，即 header.<name>（请参阅 API 插槽部分中的 docs）非常容易实现，即使是逐个单元格也是如此。

【讨论】：

成功了！我只是在其中一个标题上放了一个宽度道具，谢谢