VUE实现左右区域纵向滚动条同步滚动和右侧上下区域的横向滚动,和行定位

要点分析：

其实主要是通过ref属性来操控两个div的scrollTop属性和scrollLeft属性

        

            

                

                    
{{item.name}}
                
            
            

                

                    

                        
{{tdData[0].name}}
                        
{{tdData[1].Period? tdData[1].Period:''}}
                        

                            {{tdData[2].id}}
                        
                        

                            
{{tdData[2].cardId}}
                            

                                

                                    

                                        {{tdData[2].text? tdData[2].text:''}}
                                    
                                    

                                        

                                            {{tdData[2].agenda_type}}
                                        
                                        

                                            {{tdData[2].time? tdData[2].time:''}}
                                        
                                    
                                

                            
                        
                        

                            {{tdData[2].id}}
                        
                    
                
            
        
        

            

                

                    

                        
{{item.name}}
                    
                
            
            

                

                    

                        

                            {{item.Status==0 || item.Status==2? item.id:''}}

                            

                                
{{item.cardId}}
                                

                                    

                                        {{item.text? item.text:""}}
                                    
                                    

                                        

                                            {{item.agenda_type}}
                                        
                                        

                                            {{item.time? item.time:""}}
                                        
                                    
                                
                            
                        
                    
                
            
        

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里由于滚动太快了导致滚动每次赋值很少

效果：