Question

我的页面上有一个b-table元素，当前显示数据库中的一堆数据。目前它是分页的，但反馈表明他们宁愿在一个滚动视图中显示所有信息。我可以这样做，但问题是如果我设置一个包含div来滚动整个表，它也会滚动列标题。我需要找到一种方法，只需滚动表体，同时保留列标题，我宁愿能够在元素本身的范围内进行，而不是使用完全独立的标题绑定一些东西和背景中有一堆Javascript索具的身体。

在bootstrap-vue table component的组件引用下，它表示有一个名为tbody-class的属性，它看起来像是一种为tbody指定自定义类的方法（疯狂的）。但是，该页面没有说明如何使用它，而且我的实验没有产生任何结果：

<b-table 
    tbody-class="my-class"   <- Applies prop to table but not to tbody
    :tbody-class="my-class"  <- Seemingly ignored entirely
>

听起来这种问题在this issue thread上得到了解决，但它并没有详细说明如何解决它。它提到该功能已添加到“下一次更新”中，但该注释后发布的版本的补丁说明和文档都没有提到添加（除非它表示我在前一段中提到的属性）。它确实讨论了使用CSS选择器以迂回方式应用样式，但我也无法使用它。（在以下示例中，Chrome检查器中的tbody没有应用的样式。）

.table.my-table > tbody {
    height: 100px;
}

我使用的Vue版本是2.2.6。

Answer 1

自v2.0.0-rc.28起，添加了可选道具sticky-header以支持固定标头。

  def new
    @stage = Stage.new
    @project = Project.find(params[:project_id])
    @responsibilities = @project.responsibilities
  end

new Vue({
  el: '#app',
  data: {
    items: [
      { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
      { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
      { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
      { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
      { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
      { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
      { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
      { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
      { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
      { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
      { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
      { heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' }
    ],
  }
});

Answer 2

我需要找到一种方法来只滚动表主体，同时保留列标题，并且我希望能够在元素本身的范围内进行操作，而不是使用后台完全绑定了标头和正文，一堆JavaScript都在其中

我制作了一个example repository，供您查看如何使其工作（还具有隐藏的滚动条）。

可能还有其他方法可以完成同一件事，但这就是我所做的。

<!-- wrap table in container with class. -->
    <b-container fluid class="table-container">
      <b-table
        :items="items" 
        :fields="fields" 
        caption-top
      >
      </b-table>
    </b-container>

这是带有隐藏滚动条的CSS。

.table-container {
     height: calc(100vh - 450px);
}
 .table-container table {
     display: flex;
     flex-flow: column;
     height: 100%;
     width: 100%;
}
 .table-container table thead {
     flex: 0 0 auto;
     width: 100%;
}
 .table-container table tbody {
     flex: 1 1 auto;
     display: block;
     width: 100%;
     overflow-y: auto;
}
 .table-container table tbody tr {
     width: 100%;
}
 .table-container table thead, .table-container table tbody tr {
     display: table;
     table-layout: fixed;
}
 .table-container table {
     border-collapse: collapse;
}
 .table-container table td, .table-container table th {
     padding: 0.4em;
}
 .table-container table th {
     border: 1px solid black;
     font-size: 0.7vw;
}
 .table-container table td {
     border: 1px solid #e7e1e1;
     font-size: 0.85em;
    /* necessary to set for proper "showing row x of y" calculations if infinate scoll */
     white-space: nowrap;
     text-align: center;
     padding: 10px 5px;
     white-space: nowrap;
     text-overflow: ellipsis;
}
 .table-container table thead {
     border: 2px solid #0F0FA3;
}
 .table-container th {
     background-color: #0F0FA3;
     color: #b5aba4;
     cursor: pointer;
     -webkit-user-select: none;
   -moz-user-select: none !important;
     -ms-user-select: none;
     user-select: none;
}
 .table-container table tbody td {
     padding: 8px;
     cursor: pointer;
}
 .table-container table tbody tr:hover {
     background-color: rgba(168, 168, 239, .5);
}
 .table-container table thead td {
     padding: 10px 5px;
}
 .table-container tr:nth-child(even) {
     background-color: rgba(168, 168, 239, 1);
}

/* START Adjustments for width and scrollbar hidden */
 .table-container th.table-action, .table-container td.table-action {
     width: 5.8vw;
}
 .table-container table thead {
     width: calc(100% - 1px);
}
 .table-container table tbody::-webkit-scrollbar {
     width: 1px;
}
 .table-container table tbody::-webkit-scrollbar {
     width: 1px;
}
 .table-container table tbody::-webkit-scrollbar-thumb {
     width: 1px;
}
/* END Adjustments for width and scrollbar */

更新，这是具有固定标头但又非常受限制（ref）的另一种方式：

有几种方法可以执行此操作...而跨浏览器则不行   始终保证：

创建一个类，例如my-table-scroll

table.my-table-scroll,
table.my-table-scroll > thead,
table.my-table-scroll > tbody,
table.my-table-scroll > tfoot,
table.my-table-scroll > tbody > tr,
table.my-table-scroll > thead > tr {
  width: 100%;
  display: block
}
table.my-table-scroll > thead,
table.my-table-scroll > tbody,
table.my-table-scroll > tfoot {
  display: block;
  width: 100%;
  overflow-y: scroll;
}
table.my-table-scroll > thead,
table.my-table-scroll > tfoot {
  height: auto;
}
/* these last two rules you will need to tweak on an as needed basis */
table.my-table-scroll > tbody {
  /* set max height for tbody before it scrolls */
  max-height: 200px;
}
table.my-table-scroll > thead > tr > th,
table.my-table-scroll > thead > tr > td,
table.my-table-scroll > tbody > tr > th,
table.my-table-scroll > tbody > tr > td,
table.my-table-scroll > tfoot > tr > th,
table.my-table-scroll > tfoot > tr > td {
  display: inline-block;
  /* you need to explicitly specify the width of the table cells */
  /* either equal, or specify individual widths based on col index. */
  /* Here, we assume you have 4 columns of data */
  width: 25%;
}
/*
  could use sibling selectors to select specific columns for widths:
  td + td (second column)
  td + td + td (3rd column, etc)
*/

然后将类放在您的b表中。

如何让Vue b表用固定标题滚动主体

2 个答案: