时间戳

首页 > 解决方案 > 如何在引导 vue 中制作粘性标题表

javascript - 如何在引导 vue 中制作粘性标题表

问题描述

我是使用 javascript 和 vuejs 技术的新手，我有这样的情况，我使用 BootstrapVue 中的表组件，如下所示：

<b-table
   style="white-space: nowrap;"
   v-else
   bordered
   hover
   responsive
   class="position-relative mb-0"
   :per-page="perPage"
   :current-page="currentPage"
   :items="items"
   :fields="fields"
   :sort-by.sync="sortBy"
   :sort-desc.sync="sortDesc"
   :sort-direction="sortDirection"
   :filter="filter"
   @filtered="onFiltered"
   >
</b-table>

而且我已经尝试过sticky-header，但我认为它不合适，因为我期望的是一个粘性标题，对在表格内滚动没有任何限制，但在表格/正文之外滚动并在到达时添加一个粘性标题表顶端。

https://codesandbox.io/s/sticky-vuetify-table-header-3o0km?file=/pages/index.vue:1240-1283

这是我想在我的页面上做的一个例子，但我很挣扎，找不到 Bootstrap Vue 框架的答案。如何设置我的表格样式，使其看起来像上面的示例？

标签： javascriptcssbootstrap-4bootstrap-vue

解决方案

推荐阅读