如何让tableheader一直在最前面？

Question

我正在尝试让 table header 始终位于元素 UI 的顶部。我已经尝试过来自经典 css 的解决方案，例如：position: stiky; for th 但它不适用于 Element UI。 table 继续滚动 header。

这是我的代码https://jsfiddle.net/wb06nm51/

Answer 1

有两种方法可以实现。

先按element-ui指定的方式，在el-table上指定table的高度：https://element.eleme.io/#/en-US/component/table#table-with-fixed-header

其次是像您一样使用 css，但是您已经考虑到 element-ui 为 header 创建了 2 个 tables 1，为 header 创建了 1 个body。必须应用的正确 css 如下：

.el-table__header-wrapper {
  z-index: 100;
  position: fixed;
  top: 0;
}

// Neede to show the first row in the table
.el-table__body-wrapper {
   margin-top: 50px;
}

要使其在您的 fiddle 中正常工作，请确保您还导入了正确的 css：

@import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");

如何让tableheader一直在最前面？

How to make table header always on top?

css

vue.js

element-ui