我有一个奇怪的问题,我的标题在我的桌子上,一些标题是对齐的顶部,但其他人没有,我try 了一切,甚至对齐:"左",但它没有解决,这是我的问题的图片

enter image description here

我的代码是:

*表:

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

谢谢

推荐答案

这通常是由于包含了sortable图标(默认情况下sortable处于打开状态),可能与未设置width有关.每个属性都可以在您的 case header_data中设置.

你可以:

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

前两个选项是最简单的,前提是你满足于它们提供的约束.定制插槽选项,即header.<name>(参见API插槽部分中的docs)非常容易实现,即使是在逐个单元的基础上.

Vue.js相关问答推荐

通过另一个文件调用模块化窗口组件

检测Vue3/Vue-test-utils中的Vuex还原/Mutations

Vuetify 3 - NavBar 组件占据整个视口高度

超出最大调用堆栈大小 - Vue路由

如何在 vuejs 中导入和使用本地 .csv 文件

Vue watch 意外调用了两次

如何只查看数组中的一个对象?

如何在 vue.js 中删除类

在 vue.js 中获取当前时间和日期

apache上的Vue-router,子目录下的SPA,只能通过重定向访问页面

在渲染组件之前从 api 获取数据

如何将 vuetify 2.0 beta 安装到新的 vue cli 项目中?

Vue-test-utils:在单个测试中多次使用 $nextTick

如何在 vue 3 中获取路由的参数?

Vue.js:TypeError:无法设置只有 getter 的 # 的属性props

vue 在 v-model 之后执行 @click

触发子函数

如何在 vue.config.js 中为生产设置 API 路径?

加载时焦点文本框上的 Vue.js

如何在我的 vue js 中实现无限滚动