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

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)
    }

在获取表格数据时引用以上方法

42、element表格内容溢出自动往上滚动,鼠标移入停止滚动,溢出继续滚动_第1张图片

你可能感兴趣的:(javascript,前端,vue.js)