我有一个bootstrap-vue表,看起来像这样;

enter image description here

以下是代码;

<template>
  <div>
    <b-table hover :items="items"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          {
            age: 89,
            first_name: 'Geneva',
            last_name: 'Wilson',
            _rowVariant: 'danger'
          },
          {
            age: 40,
            first_name: 'Thor',
            last_name: 'MacDonald',
            _cellVariants: { age: 'info', first_name: 'warning' }
          },
          { age: 29, first_name: 'Dick', last_name: 'Dunlap' }
        ]
      }
    }
  }
</script>

假设该表有很多行.我希望固定顶部标题行,以便在向下滚动表时,显示列名的标题行保留在顶部.这使表格更具可读性.

Bootstrap-VUE文档中提供了表代码.

https://bootstrap-vue.org/docs/components/table

我使用的是Vue V2.6和BootstrapVue.

推荐答案

BootstrapVue的表为此目的提供了sticky-header个props .

documentation中所述,使用

<b-table :sticky-header="true">
  ...table contents here
</b-table>
  • 将表的第height位设置为300px
  • 将桌子的overflow个设置为auto
  • 将桌子的position个设置为relative
  • 为表头中的每个<th />设置positionsticky(z-index2positionrelative

Important:要使表头相对于表格而不是整个页面具有粘性,上述条件是必需的.如果您使用@LajosArpad的解决方案,表格相对于页面将是粘性的,当滚动经过表格时,表格标题将保持可见,这可能不是预期的结果.

如果你想让表中有300px以外的任何height,你必须把它作为sticky-header的值传递给prop:

<b-table sticky-header="80vh">
  ...table contents here
</b-table>

看看它在codesandbox的速度上是如何工作的.

Javascript相关问答推荐

从连接字符串创建客户端时,NodeJS连接到CosmosDB失败

可以的.是否可以在不预编译的情况下使用嵌套 Select 器?

格式值未保存在redux持久切片中

仅针对RTK查询中的未经授权的错误取消maxRetries

加载背景图像时同步旋转不显示的问题

在open shadow—root中匹配时,使用jQuery删除一个封闭的div类

如何在每次单击按钮时重新加载HighChart/设置HighChart动画?

如何迭代叔父元素的子HTML元素

material UI按钮组样式props 不反射

在HTML语言中调用外部JavaScript文件中的函数

本地库中的chartjs-4.4.2和chartjs-plugin-注解

使用插件构建包含chart.js提供程序的Angular 库?

是否可以将异步调用与useState(UnctionName)一起使用

顶点图使用组标签更新列之间的条宽

每隔3个项目交替显示,然后每1个项目交替显示

为什么这个最小Angular 的Licial.dev设置不起作用?

JSON Web令牌(JWT)错误:RSA密钥对的签名无效

当一条路由在Reaction路由中命中时,如何有条件地渲染两个组件或更改两个插座?

单击子按钮时将活动切换类添加到父分区

在ReactJS上挂载组件时获得多个身份验证请求