vue表格实现固定表头和首列

前言

前段时间做移动端的项目，项目中需要一个固定表头和首列的表格，但由于是移动端的，组件库里没有类似的，于是，就去网上找看有没有类似的，结果越找越气，10个文章9个抄，抄也行，你倒是抄个能用的啊，一篇根本就不能用的文章，抄个什么劲？有意义？？？
没办法，只有自己写一个了。

效果图

实现思路

1、首先分为四部分，左上角固定不动的表头，表头部分，首列部分，表格主体部分
2、整个表格添加定位position: relative；左上角表头添加position: fixed;
3、给白色主体部分添加滚动监听事件，在滑动的同时，使首列的scrollLeft等于主体部分的scrollLeft值；使表头的scrollTop值等于主体的scrollTop值；

2021-06-03 最近又对这个表格优化了下，以上操作是第一版，本版本优化了向左滚动同时也可以向上滚动的问题，体验不好；要求是向左右滚动则不允许上下滚动，向上下滚动不允许左右滚动；
思路是如下：
1、通过touchstart记录初始的鼠标点击位置；
2、通过touchmove记录移动时鼠标位置；
3、通过位置的x轴和y轴的差值判断用户手指移动位置；
4、左右滑动时，把盒子的overflowY设为hidden；上下滑动时，把盒子得overflowX设为hidden；
5、end！

不多说，完整代码如下，拿去即用

<template>
  <div class="pages">
    <div class="tables">
      <div class="tits">
        <div class="titsLeft">
          <p>左上角</p>
        </div>
        <div class="titsRight" ref="titsRight">
          <div>
            <p v-for="(item, i) in 50" :key="i">表头{{ i + 1 }}</p>
          </div>
        </div>
      </div>

      <div class="tbody" @scroll="scrollEvent($event)" ref="tbodyRight" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
        <div class="tbodyLeft" ref="tbodyLeft">
          <div ref="tbodyLeftItem">
            <p v-for="(item, i) in 50" :key="i">首列{{ i + 1 }}</p>
          </div>
        </div>
        <div class="tbodyRight">

          <div v-for="(item, i) in 50" :key="i" class="row">
            <p v-for="(item1, i1) in 50" :key="i1">{{ i + 1 }}-{{ i1 + 1 }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tables",
  data() {
    return {
      /* 移动所需参数 */
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      isMove: false,
    };
  },
  methods: {
    scrollEvent(e) {
      this.$refs.titsRight.style.left = -e.target.scrollLeft + 60 + "px";
      this.$refs.tbodyLeftItem.style.top = -e.target.scrollTop + "px";
    },

    /* 监听滑动开始 */
    touchstart(e) {
      /* 阻止一些默认事件 */
      // e.preventDefault();
      /* 记录初始位置 */
      this.startX = e.touches[0].pageX;
      this.startY = e.touches[0].pageY;
      console.log(this.startX, this.startY);
    },
    /* 监听滑动移动 */
    touchmove(e) {
      /* 判断是否滚动 */
      this.isMove = true;
      /* 监听滑动最终结束的位置 */
      this.endX = e.touches[0].pageX;
      this.endY = e.touches[0].pageY;

      /* 判断移动方向 */
      let X = this.endX - this.startX,
        Y = this.endY - this.startY;
      /* 判断是否移动还是点击 */
      if (this.isMove) {
        if (X > 0 && Math.abs(X) > Math.abs(Y)) {
          //向右
          console.log("向右");
          this.$refs.tbodyRight.style["overflowY"] = "hidden";
          this.$refs.tbodyRight.style["overflowX"] = "auto";
        } else if (X < 0 && Math.abs(X) > Math.abs(Y)) {
          //向左
          console.log("向左");
          this.$refs.tbodyRight.style["overflowY"] = "hidden";
          this.$refs.tbodyRight.style["overflowX"] = "auto";
        } else if (Y > 0 && Math.abs(Y) > Math.abs(X)) {
          //向下
          console.log("向下");
          this.$refs.tbodyRight.style["overflowX"] = "hidden";
          this.$refs.tbodyRight.style["overflowY"] = "auto";
        } else if (Y < 0 && Math.abs(Y) > Math.abs(X)) {
          //向上
          console.log("向上");
          this.$refs.tbodyRight.style["overflowX"] = "hidden";
          this.$refs.tbodyRight.style["overflowY"] = "auto";
        } else {
          //没有
          // console.log("没有");
        }
      } else {
        // console.log("没有");
      }
    },
  },
};
</script>
<style scoped lang="scss">
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
* {
  margin: 0;
  padding: 0;
}
p {
  width: 60px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  flex-shrink: 0;
}
.tables {
  width: 100%; //自定义表格整体宽度
  font-size: 12px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  // border-right: 1px solid red;
  // border-bottom: 1px solid red;
  // border-bottom: 1px solid #ccc;
  .tbody {
    height: 400px; //自定义表格内容高度
    overflow: auto;
  }
  > div {
    display: flex;
  }
  div {
    flex-shrink: 0;
  }
  .tits {
    height: 40px;
    padding-left: 60px;
    background-color: #fff;
  }
  .titsLeft,
  .tbodyLeft {
    width: 60px;
  }
  .titsRight,
  .tbodyRight {
    width: 250px; //自定义表头表体内容宽度
  }
  .titsLeft {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    p {
      width: 60px;
      background-color: #fff;
      border-bottom: 1px solid #ccc;
    }
  }
  .titsRight {
    height: 40px;
    position: absolute;
    top: 0;
    div {
      display: flex;
      right: 17px;
      p {
        background-color: #fff;
        border-bottom: 1px solid #ccc;
      }
    }
  }
  .tbodyLeft {
    // overflow: hidden;
    white-space: nowrap;
    height: 100%;
    background-color: #fff;
    div {
      margin-top: 40px;

      width: 60px;
      background-color: #fff;
      left: 0;
      top: 0px;
      position: absolute;
      overflow: hidden;
      p {
        border-bottom: 1px solid #ccc;
      }
      // padding-top: 40px;
      // bottom: 17px; //避开下方滚动条位置
    }
  }
  .tbodyRight {
    white-space: nowrap;
    background-color: none;
    display: flex;
    flex-direction: column;
    .row {
      display: flex;
      p {
        border-bottom: 1px solid #ccc;
      }
    }
  }
}
</style>