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

本文介绍: 有个变态的需求，要求tabs左侧固定，右侧是表格，点击左侧tab，右侧表格滚动到指定位置，同时，右侧滚动的时候，左侧tab 高亮相应的item。目前采用的是监听滚动，但是也有问题，不同的浏览器，屏幕的高度是不一样的，也有适配问题。常规的瞄点不适用，因为右侧只有一个 div(table 表格)右侧的高度非常高，内容非常多。

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

上图

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

常规的瞄点不适用，因为右侧只有一个 di v(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 &amp;&amp; this.$refs.tabsRef.$el){
          if(window.scrollY &gt; 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&lt;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 &gt; 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 &amp;&amp; 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) =&gt; {
            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"&gt;
          <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 &amp;&amp; idx !=0 &amp;&amp; (
                          <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>
      );
    }