vue+elementUI的tabs与table表格联动固定与滚动位置

有个变态的需求,要求tabs左侧固定,右侧是表格,点击左侧tab,右侧表格滚动到指定位置,同时,右侧滚动的时候,左侧tab高亮相应的item

上图

右侧的高度非常高,内容非常多

常规的瞄点不适用,因为右侧只有一个div(table表格)

目前采用的是监听滚动,但是也有问题,不同的浏览器,屏幕的高度是不一样的,也有适配问题

上代码

 

mounted() {window.addEventListener('scroll', this.scroll, true)},// method
scroll (e) {const scrollTop = [298, 730, 766, 1162, 1702, 2098, 2242, 2638, 2854, 3711]console.log(window.scrollY)// 获取元素对屏幕上边的距离if(this.$refs.tabsRef && this.$refs.tabsRef.$el){if(window.scrollY > 100){this.$refs.tabsRef.$el.style.paddingTop = window.scrollY - 180 + `px`}else{this.$refs.tabsRef.$el.style.paddingTop = window.scrollY + `px`}}for(let i=0; i<9; i++){this.$refs['tabPaneRef' + i].style.color = "#303133"}for(let i=0; i<9; i++){if(window.scrollY <= scrollTop[0]){this.$refs['tabPaneRef' + 0].style.color = "#13C2C2"document.getElementsByClassName("el-tabs__active-bar")[0].style.transform = "translateY(0px)";break;}else if(window.scrollY > scrollTop[8]){this.$refs['tabPaneRef' + 8].style.color = "#13C2C2"document.getElementsByClassName("el-tabs__active-bar")[0].style.transform = "translateY(320px)";break;}else if(scrollTop[i] <= window.scrollY && window.scrollY < scrollTop[i+1]){this.$refs['tabPaneRef' + i].style.color = "#13C2C2"document.getElementsByClassName("el-tabs__active-bar")[0].style.transform = "translateY(" +  i * 40 + "px)";break;}}},scrollToBottom(e){if(this.dataSource.length){const { tabs } = this.getFormMap(formKayMap) || { tabs: [] };let index = 0;tabs.forEach((element, i) => {if(element.tab === e.target.outerText){index = i;}});const scrolls = [0, 12, 13, 24, 39, 50, 54, 65, 71]document.getElementsByClassName("el-table__row")[scrolls[index]].scrollIntoView();}},// elementrender() {const { tabs } = this.getFormMap(formKayMap) || { tabs: [] };return (<div class='warp' ref="myContent"><div class='header'>{this.formArr.map((form, idx) => {return (<div class='form-item'><el-row class='row'><el-col span={2} class="p-b-10">{idx == 0 ? "当前所选" : `目标${idx}`}</el-col><el-col span={22}><TaskQurey search={false} ref={`taskQurey${idx}`} origin={idx == 0 ? this.origin : undefined}>{this.formArr.length > 2 && idx !=0 && (<template slot='footer'><i class='el-icon-delete' onClick={() => this.del(idx)}></i></template>)}</TaskQurey></el-col></el-row></div>);})}<div class='btns'><el-button size='small' onClick={this.add} type='success'>新增对比条件</el-button><el-button size='small' onClick={this.compare} type='primary'>开始对比</el-button><el-button size='small' onClick={this.export} type='warning'>导出对比数据</el-button></div></div><div class='content flex' id="myDiv"><el-tabs tab-position="left" ref="tabsRef" class="eltabs">{tabs.map((item, index) => {return (<el-tab-pane><template slot="label"><div ref={`tabPaneRef${index}`} class="custom-tabs-label" onClick={this.scrollToBottom}><div>{item.tab}</div></div></template></el-tab-pane>)})}</el-tabs><el-table ref="tableRef" rowKey='id' defaultExpandAll treeProps={{ children: "children" }} size='mini' border data={this.dataSource}>{this.column.map(item => {return (<el-table-columnprop={item.prop}label={item.label}align={item.prop == "title" ? "" : "center"}scopedSlots={{default: ({ row }) => {return (<span>{item.prop == "tip" ? <span class={/50/.test(row[item.prop]) ? "red" : "orange"}>{row[item.prop]}</span> : row[item.prop]}</span>);}}}/>);})}</el-table></div></div>);}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/178720.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++中的类与对象

类和对象的基本概念 C 和 C中 struct 区别 c 语言 struct 只有变量 c语言 struct 既有变量&#xff0c;也有函数 类的封装 我们编写程序的目的是为了解决现实中的问题&#xff0c;而这些问题的构成都是由各种事物组成&#xff0c;我们在计算机中要解决这种问题&#x…

vue3还用this吗?getCurrentInstance获取当前组件实例

在 Vue 2 中&#xff0c;this 关键字代表当前组件实例。在组件的选项对象中&#xff0c;this 可以用于访问组件实例的属性、方法以及 Vue 实例的一些特定方法。 在Vue3中&#xff0c;我们发现this是undefined&#xff0c;那我们真的没法使用this了吗&#xff1f;vu3给我们提供…

Vue3框架中让table合计居中对齐

第一步&#xff1a;给它加一个类名 center-table 如下&#xff1a; <el-table:data"datas.shows"max-height"600px"show-summarystripeborderstyle"width: 100%":header-cell-style"{ textAlign: center }":cell-style"{ text…

this.$refs,salesRankRefjj.searchRankCall is not a function

在vue项目中&#xff0c;在父组件使用$refs获取不到子组件的方法&#xff0c;为什么&#xff1f; 我的报错如下&#xff1a; [Vue wamn]: Error in v-on handler: "TypeError: this.$refs,salesRankRefjj.searchRankCall is not a function found in 代码如下&#xff1a…

单例模式 (Singleton Pattern)

定义&#xff1a; 单例模式&#xff08;Singleton Pattern&#xff09;是一种常用的软件设计模式&#xff0c;用于确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取这个实例。单例模式主要用于控制对某个资源或服务的访问&#xff0c;确保整个系统中只有一个对象…

【蓝桥杯 LCA 差分】 砍树

题目分析&#xff1a; 这道题还是比较裸的一道书上差分的题目了 对于每一对标记点(x,y) 他们之间的路径就是 x − > L C A ( x , y ) − > y x->LCA(x,y)->y x−>LCA(x,y)−>y 这条路径上的每一条边都要经过。 那么对于一条边&#xff0c;什么时候砍掉这条…

Linux快捷控制

Linux快捷控制 工具安装 yum -y install lrzsz wget curl net-tools git防火墙 systemctl status firewalld.service systemctl stop firewalld.service systemctl disable firewalld.service宝塔 yum install -y wget && wget -O install.sh https://download.bt.…

C# 新数插入有序数组

题目&#xff1a; 有n(n<100)个整数&#xff0c;已经按照从⼩到⼤顺序排列好&#xff0c;现在另外给⼀个整数x&#xff0c;请将该数插⼊到序列中&#xff0c;并使新的序列仍然有序。输出新的序列。 样例输入&#xff1a;10 20 30 40 50 15 样例输出&#xff1a;1…

vue3中toRaw 与 markRaw

toRaw 返回由 reactive 或 readonly 方法转换成响应式代理的普通对象。 这是一个还原方法&#xff0c;可用于临时读取&#xff0c;访问不会被代理/跟踪&#xff0c;写入时也不会触发界面更新。 markRaw 标记一个对象&#xff0c;使其永远不会转换为代理。返回对象本身 应…

jsonp 的优缺点

JSONP&#xff0c;全名是JSON with Padding&#xff0c;是一种通过<script>标签来获取跨域数据的策略。它本质上不是一个新的技术&#xff0c;只是JavaScript的普通函数调用的一种形式&#xff0c;即利用了网页脚本的同源策略。 优点&#xff1a; 实现简单&#xff1a;…

bash编程 数组和for循环的应用

bash编程 数组和for循环的应用 1、问题背景2、bash 定义数组3、for循环遍历输出数组所有元素4、编写bash脚本输出每个端口是否在监听状态 1、问题背景 linux服务器开机后&#xff0c;需要检查一组端口是否在监听&#xff0c;以便判断这些端口对应的服务是否在运行。可以考虑使…

解释LED显示屏的裸眼3D特效原理

LED电子大屏幕的3D特效技术正在不断发展&#xff0c;而实现这一技术的原理主要包括分光、分色、分时和光栅等四种方法。这些原理都有各自的特点和应用场景&#xff0c;下面将对它们进行详细介绍。 1. 分光方法 分光方法是一种基于偏振光的3D显示技术。通过使用偏振滤镜或偏振片…

leetCode 841. 钥匙和房间 图遍历 深度优先遍历+广度优先遍历 + 图解

841. 钥匙和房间 - 力扣&#xff08;LeetCode&#xff09; 有 n 个房间&#xff0c;房间按从 0 到 n - 1 编号。最初&#xff0c;除 0 号房间外的其余所有房间都被锁住。你的目标是进入所有的房间。然而&#xff0c;你不能在没有获得钥匙的时候进入锁住的房间。当你进入一个房…

0005Java程序设计-ssm基于微信小程序的校园求职系统

文章目录 摘 要目 录系统设计开发环境 编程技术交流、源码分享、模板分享、网课分享 企鹅&#x1f427;裙&#xff1a;776871563 摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据…

spring 自动装配 bean 有哪些方式

Spring提供了以下几种方式来实现自动装配Bean&#xff1a; 根据名称自动装配&#xff08;byName&#xff09;&#xff1a;Spring容器会根据Bean的名称自动将相应的依赖注入到需要的地方。在XML配置中&#xff0c;可以使用autowire"byName"来启用byName自动装配。 <…

MicroPython STM32F4 RTC功能使用介绍

MicroPython STM32F4 RTC功能使用介绍 &#x1f516;STM32和ESP32 RTC功能差不多&#xff0c;相关篇《MicroPython ESP32 RTC功能使用介绍》&#x1f4cc;固件刷可参考前面一篇《STM32刷Micropython固件参考指南》&#x1f33f; 相关篇《Micropython STM32F4入门点灯》&#x1…

RH2288H V3服务器使用ISO安装系统

1.配置和服务器相同网段地址&#xff0c;RH2288H V3服务器bmc管理网口默认IP是192.168.2.100/24&#xff0c;默认用户root&#xff0c;默认Huawei12#$&#xff0c;网线连接BMC口&#xff0c;登录。默认密码可以在开机时按del键进入配置页面修改 2.配置raid&#xff0c;生产环境…

耗时一个星期整理的APP自动化测试工具大全

在本篇文章中&#xff0c;将给大家推荐14款日常工作中经常用到的测试开发工具神器&#xff0c;涵盖了自动化测试、APP性能测试、稳定性测试、抓包工具等。 一、UI自动化测试工具 1. uiautomator2 openatx开源的ui自动化工具&#xff0c;支持Android和iOS。主要面向的编程语言…

js最新随机字符串,进制数随机字符串,更优秀的随机字符串方式,你绝对没用过的随机字符串方式,可控制位数!

js最新随机字符串&#xff0c;进制数随机字符串&#xff0c;更优秀的随机字符串方式&#xff0c;你绝对没用过的随机字符串方式&#xff0c;可控制位数&#xff01; 函数封装和传参 首先我们&#xff0c;要封装这样一个函数&#xff0c;首先要确定&#xff0c;传入哪些参数。…

java springboot中使用 AOP监听方法执行周期

首先 我们在 pom.xml 中 dependencies标签中加入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency>然后 我们随便创建一个类 编写代码如下 package com.ex…