美文网首页
table 固定首行首列

table 固定首行首列

作者: 冬日的太阳_c107 | 来源:发表于2022-10-25 09:50 被阅读0次

可直接复制代码使用

<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;

}

.pages{

  // background:red;

  margin: 4px;

}

.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;

        border-left: 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;

        border-left: 1px solid #ccc;

      }

    }

  }

}

</style>

相关文章