enement ui plus 长表格滚动如何固定表头和分页

大概需要达到的效果是这个样子，我这边也就不啰嗦，直接上代码

//这是用来混入的js  scroll.js
const scorll = {
	methods: {
		ishowBottomDiv(bottomDiv, scrollBar, tableBodyDomWrap) {
			if (bottomDiv.getBoundingClientRect().top > document.body.clientHeight) {
				if (scrollBar.style.display === "none") {
					scrollBar.style.display = "block";
					scrollBar.scrollLeft = tableBodyDomWrap.scrollLeft;
				}
				scrollBar.style.display = "block";
			} else {
				scrollBar.style.display = "none";
			}
		},
		domUpdate() {
			let dom = document.querySelector(".el-table");
			if (!dom) {
				return;
			}

			let elTable = document.querySelector(".el-table__header-wrapper");
			let paginationBox = document.querySelector(".pagination_box"); //获取的底部分页dom
			let scrollbarBar = document.querySelector(".is-horizontal"); //获取的底部分页dom
			let elTableFixed = document.querySelector(
				".el-table__fixed .el-table__fixed-header-wrapper"
			);
			let elTableFixedRight = document.querySelector(
				".el-table__fixed-right .el-table__fixed-header-wrapper"
			);
			let elTableFixedRightHeader = document.querySelector(
				".el-table__fixed-right  .el-table__header"
			);
			console.log(dom.getBoundingClientRect(), window.innerHeight);
			if (dom.getBoundingClientRect().bottom > window.innerHeight + 40) {
				if (scrollbarBar) {
					scrollbarBar.style.position = "fixed";
					scrollbarBar.style.width = dom.getBoundingClientRect().width + "px";
					scrollbarBar.style.overflow = "hidden";
					scrollbarBar.style.bottom = "35px";
					scrollbarBar.style.left = "auto";
					scrollbarBar.style.right = "40px";
				}
				if (paginationBox) {
					paginationBox.style.position = "fixed";
					paginationBox.style.width = dom.getBoundingClientRect().width + "px";
					paginationBox.style.overflow = "hidden";
					paginationBox.style.bottom = "0";
					paginationBox.style.zIndex = "2000";
					paginationBox.style.padding = "5px";
					paginationBox.style.background = "#fff";
				}
			} else {
				if (paginationBox) paginationBox.style = {};
				if (scrollbarBar) scrollbarBar.style = {};
			}
			if (dom.getBoundingClientRect().top < 64) {
				if (document.querySelector(".zhanweitablehead")) {
					//
				} else {
					let zhanwei = document.createElement("div");
					zhanwei.className = "zhanweitablehead";
					zhanwei.style.width = elTable.getBoundingClientRect().width + "px";
					zhanwei.style.height = elTable.getBoundingClientRect().height + "px";
					dom.insertBefore(zhanwei, dom.children[0]);
				}
				if (elTable) {
					elTable.style.position = "fixed";
					elTable.style.zIndex = "1000";
					elTable.style.top = "90px";
					elTable.style.width = dom.getBoundingClientRect().width + "px";
					elTable.style.overflow = "hidden";
				}

				if (elTableFixed) {
					elTableFixed.style.position = "fixed";
					elTableFixed.style.zIndex = "10000";
					elTableFixed.style.top = "60px";
					elTableFixed.style.width = "320px";
					elTableFixed.style.overflow = "hidden";
				}
				if (elTableFixedRight) {
					elTableFixedRight.style.width = document.querySelector(
						".el-table__fixed-right"
					).style.width;
					elTableFixedRight.style.position = "fixed";
					elTableFixedRight.style.zIndex = "10000";
					elTableFixedRight.style.top = "60px";
					elTableFixedRight.style.height = "50px";
					elTableFixedRight.style.right = "36px";
					elTableFixedRight.style.overflow = "hidden";
					elTableFixedRightHeader.style.position = "absolute";
					elTableFixedRightHeader.style.right = "0";
				}
			} else {
				if (!dom) {
					return;
				}
				if (document.querySelector(".zhanweitablehead")) {
					document
						.querySelector(".el-table")
						.removeChild(document.querySelector(".zhanweitablehead"));
				}
				if (elTable) elTable.style = {};
				if (elTableFixed) elTableFixed.style = {};
				if (elTableFixedRight) elTableFixedRight.style = {};
				if (elTableFixedRightHeader)
					elTableFixedRightHeader.style.position = "initial";
			}
		},
	},
	updated() {
		if (this.isScroll) {
			this.domUpdate();
		} else {
			window.removeEventListener("scroll", this.domUpdate, true);
		}
	},
	activated() {
		if (this.isScroll) {
			window.addEventListener("scroll", this.domUpdate, true);
		} else {
			window.removeEventListener("scroll", this.domUpdate, true);
		}
	},
	mounted() {
		if (this.isScroll) {
			window.addEventListener("scroll", this.domUpdate, true);
		} else {
			window.removeEventListener("scroll", this.domUpdate, true);
		}
	},
	deactivated() {
		window.removeEventListener("scroll", this.domUpdate, true);
	},
};
export default scorll;

使用方法 我这边表格是统一封装成了一个组件 我把此次滚动需要的代码贴出来，！！！注意看里面的注释内容

//table.vue   接下来引入这个组件即可   也可以单独表格使用，不封装组件，不过分页的类名不能有错
<!-- eslint-disable vue/no-mutating-props -->
<template>
	<!-- 基础表格组件 -->
	<div class="content_table">
		<div class="KY-table">
			<el-row :gutter="0">
				<el-col :span="24" class="all-m-t-20 table-main">	
					<el-table>
					
					</el-table>

				</el-col>
			</el-row>
		</div>
	</div>
	<div class="pagination_box">  //混入中我利用这个class的层级来固定的分页
		<div class="pagination all-t-r all-m-t-10" v-if="paginationShow">
			<el-pagination
				:small="small"
				v-model:current-page="pagination.pageIndex"
				:page-sizes="pageSizes"
				v-model:page-size="pagination.pageSize"
				:layout="layout"
				:total="total"
				@current-change="$currentChange($event)"
				@size-change="$sizeChange($event)"
				:background="background"
			>
			</el-pagination>
		</div>
	</div>
		</el-drawer>
	</div>
</template>
<script>

import scroll from "@/common/scroll";
export default {
	name: "KY-table",
	mixins: [scroll],

	components: {
		draggables,
	},
	data() {
		return {
		
		};
	},
	created() {
	},
	mounted() {
	},
	computed: {
	
	},
	methods: {

	},
};
</script>

<style lang="scss" scoped>

</style>