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();
        }
      },

// element

    render() {
      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-column
                    prop={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>
      );
    }
相关推荐
华子w908925859几秒前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
孤水寒月1 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu1 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_2 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6662 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey2 小时前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆2 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W2 小时前
uniapp全局状态管理实现方案
前端
Vertira2 小时前
pdf 合并 python实现(已解决)
前端·python·pdf