要让 `
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.update
TableContainerHeight(); // 计算容器
高度
window.addEventListener('resize', this.update
TableContainerHeight); // 监听窗口大小变化
const
tableEl = this.$refs.
table.$
el.queryS
elector('.
el-
table__body-wrapper');
tableEl.addEventListener('scroll', this.update
TableContainerHeight); // 监听表格滚动事件
});
},
beforeDestroy() {
window.removeEventListener('resize', this.update
TableContainerHeight); // 移除事件监听器
const
tableEl = this.$refs.
table.$
el.queryS
elector('.
el-
table__body-wrapper');
tableEl.removeEventListener('scroll', this.update
TableContainerHeight);
},
methods: {
tableRowClassName({ row, rowIndex }) {
// 自定义表格行样式
},
update
TableContainerHeight() {
const
tableContainer
El = this.$
el.queryS
elector('.
table-container');
const
tableEl = this.$refs.
table.$
el.queryS
elector('.
el-
table__body-wrapper');
const offsetTop =
tableContainer
El.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
const
tableHeight =
tableEl.clientHeight;
const scrollHeight =
tableEl.scrollHeight;
const bottom = windowHeight - offsetTop -
tableHeight;
if (scrollHeight >
tableHeight) {
tableContainer
El.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 {
tableContainer
El.style.height = '';
tableEl.style.overflowX = '';
tableEl.style.overflowY = '';
tableEl.style.maxHeight = '';
}
},
},
};
</script>
<style>
.
table-container {
position: r
elative;
overflow: hidden;
}
</style>
```
在这个示例代码中，我们首先在表格外部嵌套了一个容器，并
设置它的 `position` 样式为 `r
elative` 和 `overflow` 样式为 `hidden`，用来
固定表头和
横向滚动条的位置。然后，我们将表格放置在容器内部，并
设置它的宽度为 `100%`，用来自适应容器的宽度。接着，我们在 `mounted` 钩子函数中计算容器的
高度和
横向滚动条的位置，并监听窗口大小变化和表格滚动事件，以动态更新容器的
高度和
横向滚动条的位置。最后，在 `beforeDestroy` 钩子函数中移除事件监听器，以避免内存泄漏。
需要注意的是，这个示例代码假设表格的纵向
滚动条高度为 17px，如果你的表格纵向
滚动条高度不同，你需要相应地调整代码中的计算公式。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
5873
