<template><div><!-- 弹窗 --><el-dialogsize="big"title="名字":visible="threeeVisable"width="90%"append-to-body@close="threeeVisable = !threeeVisable"><div class="bod"><!-- <div class="left"> --><!-- 左侧导航 --><div :class="is ? 'navtigation' : 'navtigationn'"><!-- <div class="navtigation"> --><ul><i class="tyIcon icon-gengduo2" @click="zhanka()" /><li class="list" @click="scrollTo(0)"><img src="../../../public/date/images/图像 90.png" alt="" /><span class="title">标题1</span></li><li class="list" @click="scrollTo(1)"><img src="../../../public/date/images/图像 91.png" alt="" /><span class="title">标题2</span></li><li class="list" @click="scrollTo(2)"><img src="../../../public/date/images/图像 92.png" alt="" /><span class="title">标题3</span></li></ul></div><!-- </div> --><!-- <ul id="menu" class="menu"><liv-for="(menuItem, menukey) in menuList":key="menukey"class="list"@click="scrollTo(menukey)">{{ menuItem.name }}</li></ul> --><!-- <div class="content"> --><div :class="iss ? 'content' : 'contentent'"><div ref="contentt" class="conten"><div ref="cont_1" class="roll"><PatrolOne></PatrolOne></div><div ref="cont_2" class="roll">content2</div><div ref="cont_3" class="roll">content3</div><div ref="cont_4" class="roll">content4</div><div ref="cont_5" class="roll">content5</div><div ref="cont_6" class="roll">content6</div></div></div></div></el-dialog><el-table-colum align="center" prop="这里就是绑定的单元格的值" :formatter="方法名" ></el-table-colum></div></template><script>// import tab1qr from './Tab1qr.vue'// import tab4 from './Tab4.vue'// 六个子页面import PatrolOne from './richangxunshi/PatrolOne'export default {name: 'Tab1CeShi',components: {// tab1qr,// tab4,PatrolOne,},data() {return {is: 'true',iss: 'true',threeeVisable: true,hasFooter: false,//处置按钮visible2: false,active: 0,}},mounted() {window.addEventListener('scroll', this.onScroll, true)},beforeDestroy() {window.removeEventListener('scroll', this.onScroll, false)},methods: {dutyListTime(row,columu){let dutyEndTime=toe.patrolEndTimelet dutyListTime=row.patrolStartTimereturn dutyEndTime+'~'+dutyListTime}// 右侧滚动方法onScroll() {const navContents = document.querySelectorAll('.conten>div')let classArr = document.getElementsByClassName('list')console.log(classArr, 'dom')console.log(navContents, 'dom')const offsetTopArr = []navContents.forEach((item) => {offsetTopArr.push(item.offsetTop)})console.log(offsetTopArr, 'dom')let scrollTop = this.$refs.contentt.scrollTop + 40console.log(scrollTop)let navIndex = 0let count = 0for (let n = 0; n < offsetTopArr.length; n++) {if (scrollTop >= offsetTopArr[n]) {navIndex = nthis.active = navIndexconsole.log(this.active, 'asasa')if (navIndex >= 6) {console.log(classArr[n], navIndex + 'xsxs')classArr[n].style.top = -100 * count + 'px'} else if (this.$refs.contentt.scrollHeight -this.$refs.contentt.scrollTop ==this.$refs.contentt.clientHeight) {this.active = classArr.length - 1console.log(this.active)}}console.log('99')}console.log('100')for (let i = 0; i < classArr.length; i++) {console.log('c')classArr[i].style.backgroundColor = '#d4f0ee'console.log('b')if (this.active == i) {// classArr[i].style.color = 'red'classArr[i].style.backgroundColor = 'white'console.log(i)console.log('a')}}},// 左侧跳转方法scrollTo(index) {document.getElementsByClassName('roll')[index].scrollIntoView({behavior: 'smooth',block: 'center',})},openn() {this.threeeVisable = trueconsole.log('调用到了子组件')},//单元格toggleSection(rows) {if (rows) {rows.forEach((row) => {this.$refs.multipleTable.toggleRowSelection(row)})} else {this.$refs.multipleTable.clearSelection()}},handleSelectionChange(val) {this.multipleSelection = val},// 展开按钮zhanka() {this.is = !this.is// this.iss = !this.iss// let wid = document.getElementsByClassName('navtigation')// wid.style.width = '70px'},},}</script><style scoped>.bod {width: 100%;border: 1px solid red;height: 776px;position: relative;display: flex;justify-content: space-between;}.content {background-color: white;border-radius: 4px;/* border: 1px solid black; */width: 85%;height: 100%;bottom: 0;flex: 1;}.conten {overflow-y: auto;height: 774px;width: 100%;}.conten div {height: 560px;line-height: 160px;width: 100%;text-align: center;font-size: 100px;padding: 20px;background-color: #ffffff;box-shadow: 0 3px 10px 0 rgba(219, 219, 219, 0.5);border-radius: 6px;min-height: 100%;}/* .content div:not(:last-child) {margin-bottom: 2px;} */.navtigation {height: 100%;width: 15%;background-color: #d4f0ee;box-shadow: 10px 0 0 white;overflow-x: hidden;transition: width 0.1s;float: left;overflow: hidden;}.navtigation ul {top: 0;left: 0;width: 100%;padding-left: 5px;padding-top: 18px;/* margin-top: 20px; */}.navtigation ul li {list-style: none;width: 100%;color: black;border-top-left-radius: 20px;border-bottom-left-radius: 20px;margin-top: 15px;text-align: left;height: 50px;line-height: 50px;}/* .navtigation ul i {top: 10px;right: 10px;} */.navtigation ul li img {height: 30px;width: 30px;float: left;margin-top: 10px;margin-left: 30px;}.navtigation ul li span {font-size: 1vw;font-weight: 900;color: #666666;margin-left: 5px;position: absolute;/* display: none; *//* letter-spacing: 2px; */}/* 展开后的样式 */.navtigationn {height: 100%;width: 70px;background-color: #d4f0ee;box-shadow: 10px 0 0 white;overflow-x: hidden;transition: width 0.1s;float: left;overflow: hidden;}/* .navtigationn ul i {top: 10px;right: 10px;} */.navtigationn ul {top: 0;left: 0;width: 100%;padding-left: 5px;padding-top: 18px;}.navtigationn ul li {list-style: none;width: 100%;color: black;border-top-left-radius: 20px;border-bottom-left-radius: 20px;margin-top: 15px;text-align: left;height: 50px;line-height: 50px;}.navtigationn ul li img {height: 30px;width: 30px;float: left;margin-top: 10px;margin-left: 30px;}.navtigationn ul li span {font-size: 1vw;font-weight: 900;color: #666666;position: absolute;margin-left: 5px;display: none;}.iii {color: green;}/* 折叠框的样式 */.roll div {/* border: 1px solid red; */width: 100%;height: 100%;}::v-deep .conten div {padding: 0;}</style>
主要是使用滚动监听，scrollTop和记录的思想获取对应的下标，进行切换就可以了。
此为弹窗组件，可以直接使用，数据和传值自己根据情况改变；也可以把外层改为div，写在页面中
