Vue tabs左右联动直接上代码，希望对你有所帮助

直接上代码，希望对你有所帮助
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tabs</title>
		<link rel="stylesheet" href="./libs/elementui/element.css">
		<script src="./libs/js/vue.js"></script>
		<script src="./libs/elementui/element.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.body-container {
				display: flex;
				height: 100vh;
			}

			.container-left {
				width: 100px;
				flex-shrink: 0;
			}

			.container-right {
				flex: 1;
				overflow-y: auto;
			}

			.container-item {
				height: 500px;
				margin: 20px 0;
				background: #f00;
			}

			.container-button {
				position: fixed;
				bottom: 20px;
				right: 20px;
			}

			.menu-actived {
				color: #f00;
			}
		</style>
	</head>
	<body>
		<div id="app" ref="bodyContainerRef">
			<div class="body-container">
				<div class="container-left" ref="containerLeftRef">
					<div class="" v-for="(menu,mindex) in leftData" @click="selectMenu(mindex)" :class="actived==mindex?'menu-actived':''">
						{{menu}}
					</div>
				</div>
				<div class="container-right" ref="containerRightRef">
					<div v-for="item in rightData" class="container-item" ref="containerItemRef">
						{{item}}
					</div>
				</div>
			</div>
			<div id="backTop2" class="container-button" ref="containerButtonRef">
				回到顶部
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data() {
					return {
						leftData: [11, 22, 33, 44, 55],
						rightData: [1, 2, 3, 4, 5],
						heightArr: [],
						actived: null
					}
				},
				mounted() {
					this.$nextTick(() => {
						let heightArr = []
						this.$refs.containerItemRef.forEach(item => {
							console.log(item)
							heightArr.push(item.offsetTop)
						})
						this.heightArr = heightArr

						window.addEventListener('scroll', this.handleScroll, true)
					})
				},
				methods: {
					selectMenu(index) {
						this.actived = index;
						this.$refs.containerRightRef.scrollTo({
							top: this.heightArr[index], //设置距离顶部的位置
							left: 0,
							behavior: 'smooth'
						})
					},
					handleScroll() {
						let height = JSON.parse(JSON.stringify(this.heightArr))
						height.push(this.$refs.containerRightRef.scrollTop)
						height.sort(function(a, b) {
							return a - b
						});
						let index = height.indexOf(this.$refs.containerRightRef.scrollTop)
						let start = Math.abs(height[index - 1] - height[index])
						let end = Math.abs(height[index + 1] - height[index])
						if (start < end) {
							this.actived = index - 1;
						} else {
							this.actived = index;
						}
					}
				}
			})
		</script>
	</body>
</html>