企业网站建设晋升上海网络推广团队

需求：如何在el-table使用合计功能时让横向滚动条显示在最下方

分析:其实el-table一共分为三部分：el-table__header-wrapper、el-table__body-wrapper和el-table__footer-wrapper 滚动条是一直显示在el-table__body-wrapper上的我们只需要把放在el-table__body-wrapper上的滚动条显示在el-table__footer-wrapper上再开启滚动监听就可以了

1、先隐藏原本的滚动条并将合计的滚动条打开：

:deep(.el-table__body-wrapper .el-scrollbar__bar) {

  display: none !important;

}

:deep(.el-table__footer-wrapper) {

  overflow: auto;

}

2、监听el-table__footer-wrapper的滚动

        在onMounted中绑定监听事件

<el-table v-loading="loading":data="tableData":row-key="rowKey"show-summaryborderref="multipleTableRef"></el-table>const multipleTableRef: any = ref<HTMLElement | null>(null);let tableFooterBody: HTMLElement | null = null;
const syncScroll = () => {if (!tableFooterBody) return;const scrollLeft = tableFooterBody.scrollLeft;const tableHeaderBody = multipleTableRef.value?.$el.querySelector('.el-table__header-wrapper') as HTMLElement;const tableBodyScrollbar = multipleTableRef.value?.$el.querySelector('.el-table__body-wrapper .el-scrollbar__wrap') as HTMLElement;if (tableHeaderBody) tableHeaderBody.scrollLeft = scrollLeft;if (tableBodyScrollbar) tableBodyScrollbar.scrollLeft = scrollLeft;
};onMounted(() => {tableFooterBody = multipleTableRef.value?.$el.querySelector('.el-table__footer-wrapper') as HTMLElement;if (tableFooterBody) {tableFooterBody.addEventListener('scroll', syncScroll);}
});// 卸载时移除事件防止内存泄漏
onUnmounted(() => {if (tableFooterBody) {tableFooterBody.removeEventListener('scroll', syncScroll);}
});

这里边注意因为el-table__footer-wrapper用的是el-scrollbar组件，所以 tableBody 实际上不是直接可滚动的元素，而是 el-scrollbar 里面的 .el-scrollbar__wrap 负责滚动。