之前一直想实现一种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.现在的高度什么的都是写死的,这是开发中高度要动态获取。 

 

Logo

前往低代码交流专区

更多推荐