<template>
	<div class="pages">
		<div class="tables">
			<div class="tits">
				<div class="titsLeft"><p>左上角</p></div>
				<div class="titsRight" ref="titsRight">
					<div>
						<p v-for="(item, i) in 50" :key="i">表头{{ i + 1 }}</p>
					</div>
				</div>
			</div>

			<div class="tbody">
				<div class="tbodyLeft" ref="tbodyLeft">
					<div>
						<p v-for="(item, i) in 50" :key="i">首列{{ i + 1 }}</p>
					</div>
				</div>
				<div class="tbodyRight" @scroll="scrollEvent($event)" ref="tbodyRight">
						<div v-for="(item, i) in 50" :key="i" class="row">
							<p v-for="(item1, i1) in 50" :key="i1">{{ i + 1 }}-{{ i1 + 1 }}</p>
						</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'tables',
	data() {
		return {};
	},
	methods: {
		scrollEvent(e) {
			let tbodyRightScrollLeft = e.target.scrollLeft;
			let tbodyRightScrollTop = e.target.scrollTop;

			this.$refs.titsRight.scrollLeft = tbodyRightScrollLeft;
			this.$refs.tbodyLeft.scrollTop = tbodyRightScrollTop;
		}
	}
};
</script>
<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
p {
	width: 50px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	flex-shrink: 0;
}
.tables {
	width: 310px; //自定义表格整体宽度
	font-size: 12px;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	position: relative;
	border-right: 1px solid red;
	border-bottom: 1px solid red;
	.tbody{
		height: 400px; //自定义表格内容高度
	}
	> div {
		display: flex;
	}
	div {
		flex-shrink: 0;
	}
	.tits {
		height: 40px;
		padding-left: 60px;
	}
	.titsLeft,
	.tbodyLeft {
		width: 60px;
	}
	.titsRight,
	.tbodyRight {
		width: 250px; //自定义表头表体内容宽度
	}
	.titsLeft {
		position: fixed;
		top: 0;
		left: 0;
		p {
			width: 60px;
			background-color: orange;
		}
	}
	.titsRight {
		overflow: hidden;
		white-space: nowrap;
		background-color: pink;
		div {
			width: 500px;
			height: 400px;
			display: flex;
		}
	}
	.tbodyLeft {
		overflow: hidden;
		white-space: nowrap;
		background-color: pink;
		div {
			width: 50px;	
		}
	}
	.tbodyRight {
		overflow: hidden;
		overflow: auto;
		white-space: nowrap;
		background-color: none;
		display: flex;
		flex-direction: column;
			.row {
				display: flex;
			}
			
			> :nth-child(2n+1) {
				p{
					//background-color:#ccc;
				}
			}
	}
}
</style>