vue实现变态表格表头和列固定

复杂表格表头和列固定

对于这个问题，相信网上也会有很多答案，很多插件或者是类似的案例，一下是我参考别人所写的案例自己改造的一个变态表格
1.实现的效果是，左右滚动，左边列固定，上下滚动，上边头部固定
2.要实现这个效果，具体方法是分为四个表格，用到了同步滚动的方法
3.反正很复杂，直接上代码吧
template:

<template>
	<div class="table-scroll-mod">
		<div class="table-scroll-box" ref="tableScrollBox">
			<!-- 头部 -->
			<div class="fixed-head" ref="tableFixedHead">
				<table>
					<thead>
						<tr>
							<div class="top-btn">
								<div class="top-before-table">
									<div class="pagination-btn">
										<el-button type="primary" style="margin-right:0.05rem;">自动量化打分</el-button>
										<el-button type="primary" style="margin-right:0;">复制打分值</el-button>
									</div>
									<div class="count-description">
										<p class="counter">合计(满分70分)：</p>
										<p class="descrip">评分描述</p>
									</div>
								</div>
								<div class="score-table">
									<ul class="ul-companyList">
										<li v-for="(com,index) in companLsit" :key="index">
											<span>{
  {com.score}}</span>
											<div class="com-name">
												<span>{
  {com.comName}}</span>
												<a class="submitScore">提交</a>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</tr>
					</thead>
				</table>
			</div>
			<!-- 左边 -->
			<div class="fixed-left" ref="tableFixedLeft">
				<table>
					<thead>
						<tr>
							<div class="top-btn">
								<div class="pagination-btn">
									<el-button type="primary" style="margin-right:0.05rem;">自动量化打分</el-button>
									<el-button type="primary" style="margin-right:0;">复制打分值</el-button>
									<v-complex :pageList="groupPageList" @fnPage="loadCompanyInfo"></v-complex>
								</div>
								<div class="count-description">
									<p class="counter">合计(满分70分)：</p>
									<p class="descrip">评分描述</p>
								</div>
							</div>
						</tr>
					</thead>
					<tbody>
						<div class="fz-table">
							<div class="before-table">
								<ul class="sx-title">
									<li>属性名称</li>