本文主要是介绍el-table 表格从下往上滚动，触底自动请求新数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
关键点：
1、 el-table 需要设置高度 height；
2、el-table 外层盒子需要设置一个高度，并且设置 overflow：hidden；
3、获取 el-table 的 bodyWrapper：divData
divData.scrollTop + divData.clientHeight + 1 >= divData.scrollHeight；（触底）
重新请求数据；并将列表置顶：设置 divData.scrollTop = 0；
4、为el-table 添加鼠标移入移除事件，启停滚动；
<!--* @Author: xxx* @objectDescription: 滚动、合并行table* @Date: 2024-04-16 14:35:58
-->
<template><div class="span-roll-table"><div class="table-contain"><el-tableref="rollTable":data="list"height="100%":span-method="objectSpanMethod":header-cell-style="{textAlign: 'center',width: 'fit-content',backgroundColor: '#F2F6FC',}"class="table"@mouseenter.native="stopScroll"@mouseleave.native="startScroll"></el-table></div></div>
</template><script>
export default {data() {return {list: [],rollTimer: null,};},mounted() {this.startScroll();},methods: {// 获取新数据async onChange() {this.list = [{name: "1",},{name: "2",},{name: "3",},{name: "4",},];// 将列表置顶this.$nextTick(() => {const table = this.$refs.rollTable;const divData = table.bodyWrapper;divData.scrollTop = 0;});},// 开始滚动startScroll() {this.tableScroll(false);},// 停止滚动stopScroll() {this.tableScroll(true);},// 列表滚动tableScroll(stop) {if (stop) {if (this.rollTimer) {clearInterval(this.rollTimer);return;}}const table = this.$refs.rollTable;const divData = table.bodyWrapper;this.rollTimer = setInterval(() => {divData.scrollTop += 2;this.$nextTick(() => {if (divData.scrollTop + divData.clientHeight + 1 >=divData.scrollHeight) {this.onChange();}});}, 200);},// 合并列表第一个单元格（并列排名）objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {// 获取当前单元格的值（单元格项一定要配置 prop 属性，否则拿不到值！！！！）const currentValue = row[column.property];// 获取上一行相同列的值const preRow = this.typeTableData[rowIndex - 1];const preValue = preRow ? preRow[column.property] : null;// 如果当前值和上一行的值相同，则将当前单元格隐藏if (currentValue === preValue) {return { rowspan: 0, colspan: 0 };} else {// 否则计算当前单元格应该跨越多少行let rowspan = 1;for (let i = rowIndex + 1; i < this.typeTableData.length; i++) {const nextRow = this.typeTableData[i];const nextValue = nextRow[column.property];if (nextValue === currentValue) {rowspan++;} else {break;}}return { rowspan, colspan: 1 };}}},},beforeDestroy() {clearInterval(this.rollTimer);this.startScroll = () => {};},
};
</script>
<style lang="less" scoped>
.span-roll-table {height: 400px;.table-contain {height: 100%;overflow: hidden;}
}/* 隐藏滚动条，但仍然可以滚动 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {display: none; /* 针对Webkit浏览器 */
}
</style>
参考文章
这篇关于el-table 表格从下往上滚动，触底自动请求新数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
