el-table 数据过多时设置横向滚动条固定在屏幕底部
时间: 2023-10-18 08:32:26 浏览: 123
element的el-table中记录滚动条位置的示例代码
要让 `el-table` 的横向滚动条固定在屏幕底部,你可以在表格外部嵌套一个容器,用来固定表头和横向滚动条的位置,然后将表格放置在容器内部,并设置它的高度、宽度和 `overflow` 样式,用来实现纵向滚动。同时,你还需要通过 JavaScript 代码来动态计算容器的高度和横向滚动条的位置,以确保横向滚动条始终出现在屏幕底部。下面是一个示例代码:
```html
<template>
<div class="table-container">
<el-table
ref="table"
:data="tableData"
style="width: 100%;"
:row-class-name="tableRowClassName"
>
<!-- 表格列 -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 表格数据
};
},
mounted() {
this.$nextTick(() => {
this.updateTableContainerHeight(); // 计算容器高度
window.addEventListener('resize', this.updateTableContainerHeight); // 监听窗口大小变化
const tableEl = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
tableEl.addEventListener('scroll', this.updateTableContainerHeight); // 监听表格滚动事件
});
},
beforeDestroy() {
window.removeEventListener('resize', this.updateTableContainerHeight); // 移除事件监听器
const tableEl = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
tableEl.removeEventListener('scroll', this.updateTableContainerHeight);
},
methods: {
tableRowClassName({ row, rowIndex }) {
// 自定义表格行样式
},
updateTableContainerHeight() {
const tableContainerEl = this.$el.querySelector('.table-container');
const tableEl = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
const offsetTop = tableContainerEl.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
const tableHeight = tableEl.clientHeight;
const scrollHeight = tableEl.scrollHeight;
const bottom = windowHeight - offsetTop - tableHeight;
if (scrollHeight > tableHeight) {
tableContainerEl.style.height = `calc(100vh - ${offsetTop}px - ${bottom}px)`;
tableEl.style.overflowX = 'scroll';
tableEl.style.overflowY = 'hidden';
tableEl.style.maxHeight = `calc(100vh - ${offsetTop}px - ${bottom}px - 17px)`;
} else {
tableContainerEl.style.height = '';
tableEl.style.overflowX = '';
tableEl.style.overflowY = '';
tableEl.style.maxHeight = '';
}
},
},
};
</script>
<style>
.table-container {
position: relative;
overflow: hidden;
}
</style>
```
在这个示例代码中,我们首先在表格外部嵌套了一个容器,并设置它的 `position` 样式为 `relative` 和 `overflow` 样式为 `hidden`,用来固定表头和横向滚动条的位置。然后,我们将表格放置在容器内部,并设置它的宽度为 `100%`,用来自适应容器的宽度。接着,我们在 `mounted` 钩子函数中计算容器的高度和横向滚动条的位置,并监听窗口大小变化和表格滚动事件,以动态更新容器的高度和横向滚动条的位置。最后,在 `beforeDestroy` 钩子函数中移除事件监听器,以避免内存泄漏。
需要注意的是,这个示例代码假设表格的纵向滚动条高度为 17px,如果你的表格纵向滚动条高度不同,你需要相应地调整代码中的计算公式。
阅读全文