要点分析：
其实主要是通过ref属性来操控两个div的scrollTop属性和scrollLeft属性
<div class="left">
<table class="left-Thead">
<tr>
<th v-show="tableData.leftTable.theadData.length>0" v-for="(item,index) in tableData.leftTable.theadData" :key="index">{{item.name}}</th>
</tr>
</table>
<table class="left-table" ref="leftForm" id="leftTable" @scroll="leftHandleScroll()">
<tbody>
<tr v-show="tableData.leftTable.tbodyData.length>0" v-for="(tdData,index) in tableData.leftTable.tbodyData" :key="index">
<td class="td1">{{tdData[0].name}}</td>
<td class="td2">{{tdData[1].Period? tdData[1].Period:''}}</td>
<td v-if="tdData[2].Status==2" class="cardKong">
{{tdData[2].id}}
</td>
<td v-if="tdData[2].Status==1" class="cardBox" @click="tolink(tdData[2].url)">
<div v-show="false">{{tdData[2].cardId}}</div>
<div class="card">
<div class="crad-content">
<div class="text">
<span class="textF">{{tdData[2].text? tdData[2].text:''}}</span>
</div>
<div class="bthBox">
<div class="bth">
{{tdData[2].agenda_type}}
</div>
<div class="time">
<span class="timeF">{{tdData[2].time? tdData[2].time:''}}</span>
</div>
</div>
</div>
</div>
</td>
<td v-if="tdData[2].Status==0" class="kong">
{{tdData[2].id}}
</td>
</tr>
</tbody>
</table>
</div>
<div class="right">
<div class="right-Thead-Box" ref="rightTheadTable" @scroll="rightTopHandleScroll()">
<table class="right-Thead">
<tr>
<th v-show="tableData.rightTable.theadData.length>0" v-for="(item,index) in tableData.rightTable.theadData" :key="index">{{item.name}}</th>
</tr>
</table>
</div>
<div class="right-table-Box" ref="rightForm" @scroll="rightHandleScroll()">
<table class="right-table" id="rightTable">
<tr v-show=" tableData.rightTable.tbodyData.length>0" v-for="(tdData,index) in tableData.rightTable.tbodyData" :key="index">
<td :class="[item.Status==0? 'kong':'',item.Status==2? 'cardKong':'',item.Status==1?'cardBox':'' ]" v-for="(item,index2) in tdData" :key="index2" @click="tolink(item.url)">
{{item.Status==0 || item.Status==2? item.id:''}}
<div v-if="item.Status==1" class="card">
<div class="yc" v-show="item.Status==1">{{item.cardId}}</div>
<div class="crad-content">
<div class="text ">
<span class="textF">{{item.text? item.text:""}}</span>
</div>
<div class="bthBox">
<div class="bth">
{{item.agenda_type}}
</div>
<div class="time">
<span class="timeF">{{item.time? item.time:""}}</span>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>js部分
//左右两个表一块y轴滚动（分析差异）
leftHandleScroll() {
if (this.timer) {
return
}
this.timer = setTimeout(() => {
this.timer = null
this.$refs.rightForm.scrollTop = this.$refs.leftForm.scrollTop
}, 150) // 3 * 1000
},
rightHandleScroll() {
if (this.timer) {
return
}
this.timer = setTimeout(() => {
this.timer = null
this.$refs.leftForm.scrollTop = this.$refs.rightForm.scrollTop
this.$refs.rightTheadTable.scrollLeft = this.$refs.rightForm.scrollLeft
}, 150) // 3 * 1000
},
//右侧上下两个表一块x轴滚动（分析差异）
rightTopHandleScroll() {
if (this.timer) {
return
}
this.timer = setTimeout(() => {
this.timer = null
this.$refs.rightForm.scrollLeft = this.$refs.rightTheadTable.scrollLeft
}, 150) // 3 * 1
},行定位：
npm install moment – -save
在main.js中将moment放在vue的原型上
import Moment from 'moment'
Vue.prototype.$moment = Moment//得到表格定位的行号
getSeqNo(){
//这里通过moment插件，处理时间戳和指定时间格式的切换，得到当前月份的日
let a = this.$moment(new Date()).format("YYYY-MM-DD").split('-')
let index=this.tableData.leftTable.tbodyData.findIndex((item,index)=>{
return item[0].name==a[2]
})
//通过条件得到要定位的行号的索引号
this.seqNo=index
},
// 表格默认进入的时候的定位
tableDing(seqNo) {
//滚动到指定的行
var temp = ".main .left .left-table tbody tr:nth-child(" + seqNo + ")"; //获取某行的对象， seqNO为行号
var tableheight = $('.main .left .left-table tbody').height(); //获得容器的高度
var temp2 = (Number(seqNo) / $('.main .left .left-table tbody tr').length) * tableheight; //计算该行在容器的比例
//方法一不管用，直接拿容器的来滚动到指定的比例位置
$('.main .left .left-table').scrollTop(temp2);
},注意：这里使用了节流，因为在QQ浏览器还有ie里由于滚动太快了导致滚动每次赋值很少
效果：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79800.html
