table表格初始化自动滚动和鼠标移入滚动两种方法

最新推荐文章于 2024-09-19 16:01:15 发布

xiaoming_0208

最新推荐文章于 2024-09-19 16:01:15 发布

阅读量1k

点赞数 1

文章标签：计算机外设

本文链接：https://blog.csdn.net/xiaoming4965/article/details/130871757

版权

方法一、初始化自动滚动

html部分 :data="tableData" ref="sdangerTable" “tableData”表格数组

<el-table :data="tableData"  ref="sdangerTable"></el-table>

js部分挂载

 mounted() {

    this.tablescroll();

  },

//自动滚动及鼠标移入移出方法一致

  //滚动方法
    tablescroll() {
      clearInterval(this.interval);
      const table = this.$refs.sdangerTable;
      const divData = table.bodyWrapper;
      this.interval = setInterval(() => {
        divData.scrollTop += 1
        if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
          if (table.tableData.length > 6) {
            divData.scrollTop = 0;
          }
        }
      }, 100);
      const that = this;
      window.onresize = () => {
        return (() => {
          window.screenHeight = document.body.clientHeight;
          that.clientHeight = window.screenHeight
        })();
      }
    },

方法二、鼠标移入后自动滚动移出后停止滚动

 <el-table :data="tableData"  
        ref="sdangerTable" @cell-mouse-enter="startScroll"
          @cell-mouse-leave="stopScroll">
 </el-table>

 // 鼠标移入滚动
    startScroll() {
      this.tablescroll();
    },
    // 鼠标移出停止滚动
    stopScroll() {
      clearInterval(this.interval);
      this.interval = null;
    },

    //滚动方法
    tablescroll() {
      clearInterval(this.interval);
      const table = this.$refs.sdangerTable;
      const divData = table.bodyWrapper;
      this.interval = setInterval(() => {
        divData.scrollTop += 1
        if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
          if (table.tableData.length > 6) {
            divData.scrollTop = 0;
          }
        }
      }, 100);
      const that = this;
      window.onresize = () => {
        return (() => {
          window.screenHeight = document.body.clientHeight;
          that.clientHeight = window.screenHeight
        })();
      }
    },