42、element表格内容溢出自动往上滚动，鼠标移入停止滚动，溢出继续滚动

最新推荐文章于 2024-06-22 15:17:57 发布

前端@伦伦

最新推荐文章于 2024-06-22 15:17:57 发布

阅读量305

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/ljl960426/article/details/134512562

版权

vue模块，添加ref属性

<v-table ref="rollTable" style="margin: 0!important;" :loading="TBloading" :isIndex="true" :tableData="tableData"
                           :tableHead="tableHead"
                           :paginationShow="false"
                           :autoGN="true"
                  >
                    <template v-slot:wcName="slotData">
                      <span
                          :style="{color:slotData.data.is == '未完成' ? '#FF8A24' : '#00F69A'}">{{
                          slotData.data.is
                        }}</span>
                    </template>
                  </v-table>

infinitScroll() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.rollTable.tableElement;
      // console.log(table,'table')
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      divData.onmouseover = function () {
        clearInterval(rolltable);
      }; //鼠标移入，停止滚动
      divData.onmouseout = function () {
        start();
      }; //鼠标移出，继续滚动

      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每1秒移动20像素)
      let rolltable;

      function start() {
        // 数据少于表格高度停止滚动
        if (divData.clientHeight >= divData.scrollHeight) {
          return;
        }
        rolltable = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 4;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }, 100);
      };
      setTimeout(()=>{
        start();
      },100)
    }