eltable固定表头

要在ElementUI的Table组件中固定表头，可以使用CSS来实现。通过设置表头容器的position为sticky，并指定top值，可以使表头在滚动时保持固定位置。例如，可以使用以下CSS样式来实现：

:deep(.el-table__header-wrapper) {
  position: sticky;
  top: 100px; // 根据实际情况调整
  z-index: 10;
}

这样设置后，当表格内容滚动时，表头会保持在顶部固定显示。

相关问题

eltable动态固定某一列

在Element UI库中的el-table组件中，如果你想让某一列在数据滚动时始终保持可见并固定不动，你可以通过设置`fixed`属性来实现列的固定。这个属性可以接受两个值：`left`、`right`，分别对应左侧固定和右侧固定。

例如，如果你想要将表头的某一列固定在左边，可以在列配置对象中添加`fixed`和`fixedColumn`属性：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名" fixed></el-table-column>
    <!-- 其他列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据...
      ]
    };
  }
};
</script>

在这个例子中，`name`列将会在表格滚动时始终保持在左边。如果需要将其他列固定，只需要改变对应的`prop`即可。

如何实现elementui中固定表头的表格滚动到底部后加载更多

要实现在 element-ui 中固定表头并滚动到底部加载更多数据，需要使用 el-table 组件中的 "body-style" 属性和 "scroll" 属性。

1. 使用 "body-style" 属性设置表格内容的高度和 overflow 属性。例如：

<el-table :data="tableData" body-style="height: 200px;overflow-y: auto;">

2. 使用 "scroll" 属性设置表格滚动的宽度和高度。例如：

<el-table :data="tableData" :body-style="{height: '200px',overflow: 'auto'}" :scroll="{y: '200px'}">

3. 然后监听滚动条滚动事件,判断是否已滚动到底部,然后加载更多数据

<el-table ref="elTable" :data="tableData" 
  :body-style="{height: '200px',overflow: 'auto'}" 
  :scroll="{y: '200px'}"
  @scroll="handleScroll"
>
</el-table>

methods: {
    handleScroll(event) {
        //event.srcElement 就是el-table-body，可以判断是否已滚动到底部 
        if (event.srcElement.scrollHeight - event.srcElement.scrollTop === event.srcElement.clientHeight) {
            //加载更多数据
            ...
        }
    }
}