Vue table表单滑动固定头部和左列

     之前一直想实现一种table表单滑动固定头部和左列的效果，这两天改bug抽时间就做了一个，先看效果。

顶部固定

左侧固定

  

1.  这里主要用到左右两个table标签，每一个table都由thead和tbody组成；固定thead,设置tbody滑动。

     <div class="container">
       <div class="left-div" @mouseenter="leftenter" @mouseleave="leftleave">
         <table>
           <thead>
             <tr>
               <th v-for="(item,index) in columns" :key="index">{{item.title}}</th>
             </tr>
           </thead>
           <tbody ref="leftbody" style="margin-right:-15px">
             <tr v-for="(item,index) in columnsBottom" :key="index">
               <td class="left-td">{{item.title}}</td>
             </tr>
           </tbody>
         </table>
       </div>
   
       <div class="right-div" @mouseenter="rightenter" @mouseleave="rightleave">
         <table >
           <thead>
             <tr>
               <th v-for="(item,index) in columnsBottom" :key="index">{{item.title}}</th>
             </tr>
           </thead>
           <tbody ref="rightbody">
             <tr v-for="(item,index) in columnsBottom" :key="index">
               <td v-for="(item,index) in columnsBottom" :key="index">{{item.title}}</td>
             </tr>
           </tbody>
         </table>
       </div>
     </div>
   
   <style scoped>
   .container {
     display: flex;
     height: 800px;
   }
   .container table {
     height: 100%;
   }
   
   .right-div {
     flex: 1;
     overflow: scroll;
   }
   .left-div {
     overflow: hidden;
   }
   
   .left-td{
       cursor: pointer;
       color: blueviolet
   }
   
   td,
   th {
     text-align: center;
     min-width: 300px;
     height: 60px;
   }
   
   th{
     color: blue
   }
   
   table thead,
   tbody tr {
     display: table;
     table-layout: fixed;
     border-bottom: 1px solid rebeccapurple;
   }
   thead {
     height: 60px;
   }
   tbody {
     height: 720px;
     display: block;
     overflow: scroll;
   }
   </style>

    

 2.设置滚动监听，左边滚动联动右边，右边滚动联动左边。

 left.addEventListener(
      "scroll",
      () => {
        if (this.isRight) {
          return;
        }
        let scrollTop = left.scrollTop;
        right.scrollTop = scrollTop;
      },
      false
    );
    right.addEventListener(
      "scroll",
      () => {
        if (this.isLeft) {
          return;
        }
        let scrollTop = right.scrollTop;
        left.scrollTop = scrollTop;
      },
      false
    );

 3.现在的高度什么的都是写死的，这是开发中高度要动态获取。