长文章阅读elementui tree左侧导航，右侧长文章，两侧联动

长文章阅读，使用vue + elementui tree

左侧导航，点击后右侧跳转到相应位置。

右侧长文章，滚动到某个位置，左侧导航修改选中。

<template>
	<div class="flex articleBox">
		<div class="leftBox">
			<el-tree :data="list" ref="tree" node-key="id" :props="defaultProps" default-expand-all highlight-current @node-click="handleNodeClick"></el-tree>
		</div>
		<div class="rightBox">
			<div v-for="(item,index) in 13" class="contentBox" :id="'a'+(index+1)">{{index+1}}</div>
		</div>
	</div>
</template>
<script>
	// import api from '@/services/other'
	export default {
		data() {
			return {
				//baseUrl: this.$store.state.baseUrl,
				list: [
					{
					id:1,
					label: '一级 1',
					children: [{
						id:2,
						label: '二级 1-1',
						children: [{
							id:3,
							label: '三级 1-1-1'
						}]
					}]
				}, {
					label: '一级 2',
					id:4,
					children: [{
						label: '二级 2-1',
						id:5,
						children: [{
							id:6,
							label: '三级 2-1-1'
						}]
					}, {
						id:7,
						label: '二级 2-2',
						children: [{
							id:8,
							label: '三级 2-2-1'
						}]
					}]
				}, {
					id:9,
					label: '一级 3',
					children: [{
						id:10,
						label: '二级 3-1',
						children: [{
							id:11,
							label: '三级 3-1-1'
						}]
					}, {
						id:12,
						label: '二级 3-2',
						children: [{
							id:13,
							label: '三级 3-2-1'
						}]
					}]
				}],
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				long:[],
			}
		},
		created() {
			this.$nextTick(()=>{
				for (let i = 0; i < 13; i++) {
					this.long.push({id:i+1,top:document.getElementById("a"+(i+1)).offsetTop});
				}
			});
			window.onscroll = ()=>{
			    setTimeout(()=>{
					var st = document.documentElement.scrollTop || document.body.scrollTop;
					this.comparenum(st);
				},200)
			};
		},
		methods: {
			comparenum(num){
				for (let i = 0; i < this.long.length; i++) {
					if(num<this.long[i].top){
						this.$refs.tree.setCurrentKey(this.long[i].id);
						break;
					}
				}
			},
			handleNodeClick(data) {
				console.log(data);
				location.href = "/article?#a"+data.id;
			}
		},
	}
	
</script>
<style lang="scss">
	.contentBox{height:200px;border-top:1px solid #aaa;}
	.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{color:red;}
	.leftBox {
		Box-sizing: border-Box;
		width: 494px;position: sticky;top:0;
		border-right: 1px solid #bbb;
		padding: 45px 0;
	}

	.rightBox {
		flex: 1;
		Box-sizing: border-Box;
		padding: 45px 70px;
	}
	.flex {
	    display: flex;
	    align-items: center;
	    flex-wrap: wrap;
	}
	.articleBox{align-items:flex-start;}
</style>

 

原文地址：https://blog.csdn.net/cc1314_/article/details/116740557