vue3 elementplus 表格滚动

### Vue3 中使用 Element Plus 实现表格滚动 #### 表格滚动的基础设置 为了使 `el-table` 组件能够支持滚动，需配置其属性来适应不同的需求。对于水平和垂直方向上的滚动效果，可以通过设定 `height` 或者 `max-height` 属性让表格具备固定的头部，在内容超出容器高度时自动显示滚动条[^2]。 ```html <template> <div class="table-container"> <!-- 设置最大高度 --> <el-table :data="tableData" style="width: 100%" max-height="400"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script setup> import { ref } from 'vue' const tableData = ref([ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, // 更多的数据项... ]) </script> ``` #### 动态监听滚动事件并响应 当需要对用户的滚动行为做出反应时，可以利用 JavaScript 的原生方法获取到 `.el-table__body-wrapper` 这个特定类名下的 DOM 节点，并为其绑定自定义的滚动事件处理器函数 `onScrollHandler()` 来执行相应的逻辑操作。 ```javascript // 在 mounted 生命周期钩子内初始化滚动事件监听器 mounted() { const bodyWrapper = document.querySelector( '.detailTable .el-table__body-wrapper .el-scrollbar__wrap' ); if (bodyWrapper) { bodyWrapper.addEventListener('scroll', this.onScollbar); } } methods: { onScollbar(event) { console.log(`当前滚动距离：${event.target.scrollTop}`); // 可在此处添加更多业务逻辑代码 } } ``` 需要注意的是，上述方式适用于全局范围内捕获指定元素的滚动动作；如果希望仅针对某个实例内的组件，则建议采用更安全的方式——通过模板引用(refs)机制访问内部节点，从而避免潜在的选择符冲突风险。 #### 自动加载新数据（懒加载） 为了让用户体验更加流畅，可以在用户接近页面底部之前预先加载下一页的内容。这通常涉及到计算可视区域大小以及判断何时触发新的请求去拉取额外的信息片段。 ```javascript computed: { isNearBottom() { const wrapper = document.querySelector('.el-table__body-wrapper'); return ( wrapper && wrapper.scrollHeight - Math.ceil(wrapper.scrollTop + wrapper.clientHeight) < 500 ); // 当剩余未见部分小于等于500px时认为即将触底 } }, watch: { async isNearBottom(val) { if (!this.loading && val) { await fetchData(); this.loading = false; } } } ``` 以上就是有关于 Vue3 结合 Element Plus 库创建具有滚动特性的交互式表格的一些基本指导和技术要点介绍。