element-UI el-table添加滚动条

export function scrollY(boxc, hbox) {	//Y轴滚动
  let pointX, pointY, top = 0, moveX, moveY;
  var move = false;
  let box = $(boxc);
  var H = box.height();
  var W = box.width();
  var ht = $(hbox).height();
  var cententH = box.children().height();
  var btnH = H / cententH * H;
  let idCode = new Date().getTime();
  let scrollY = '
';
  scrollY += '
';
  scrollY += '
';
  scrollY += '
';
  box.parent().css({"position": "relative"});
  // console.log(box.height())
  // console.log(ht)
  if (H / cententH < 1) {
    $(".scrollboxs" + idCode).remove();
    box.before(scrollY);
    box.css({"overflow-y": "hidden"});
  } else {
    $(".scrollboxs" + idCode).remove();
  }
  $("#scrollbtn" + idCode).hover(function () {
    $(this).children().css({
      "background-color": "rgba(144, 147, 153, 0.3)",
    });
  }, function () {
    $(this).children().css({
      "background-color": "rgba(144, 147, 153, 0.3)",
    });
  });

  function addscroll(idCode) {

    top = $("#scrollbtn" + idCode).attr("tops");


    if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) { //火狐浏览器
      box.on('DOMMouseScroll', function (e, delta) {
        e.preventDefault();
        top = $("#scrollbtn" + idCode).attr("tops") * 1;

        var delta = e.detail;

        if (delta > 0) {
          if (top + btnH < H) {
            $("#scrollbtn" + idCode).css({
              "margin-top": (top + 10) + 'px'
            });
            $("#scrollbtn" + idCode).attr("tops", top + 10);
            box.scrollTop((top + 10) / H * cententH);
          }

        } else {
          if (top != 0) {
            $("#scrollbtn" + idCode).css({
              "margin-top": (top - 10) + 'px'
            });
            $("#scrollbtn" + idCode).attr("tops", top - 10);
            box.scrollTop((top - 10) / H * cententH);
          }
        }
      })
    } else { //其他浏览器
      box.on('mousewheel', function (e, delta) {
        // debugger
        e.preventDefault();
        // e.stopPropagation();
        top = $("#scrollbtn" + idCode).attr("tops") * 1;
        var delta = e.originalEvent.wheelDelta;
        if (delta < 0) {
          if (top + btnH < H) {
            $("#scrollbtn" + idCode).css({
              "margin-top": (top + 10) + 'px'
            });
            $("#scrollbtn" + idCode).attr("tops", top + 10);
            box.scrollTop((top + 10) / H * cententH);
          }

        } else {
          if (top != 0) {
            $("#scrollbtn" + idCode).css({
              "margin-top": (top - 10) + 'px'
            });
            $("#scrollbtn" + idCode).attr("tops", top - 10);
            box.scrollTop((top - 10) / H * cententH);
          }
        }

      })
    }
  }

  addscroll(idCode);
  $("#scrollbtn" + idCode).mousedown(function (e) {
    pointX = e.pageX;
    //这里可以得到鼠标Y坐标
    pointY = e.pageY;
    move = true;
    top = $("#scrollbtn" + idCode).attr("tops") * 1;
    $(this).focus();
  });
  $(document).mousemove(function (e) {
    e.stopPropagation();
    if (move == true) {
      box.unbind();
      moveX = e.pageX - pointX;
      //这里可以得到鼠标Y坐标
      moveY = e.pageY - pointY;
      $("#scrollbtn" + idCode).css({
        "margin-top": top + moveY
      });
      $("#scrollbtn" + idCode).attr("tops", top + moveY);
      box.scrollTop((top + moveY) / H * cententH);
      if (top + moveY > H - btnH) {
        $("#scrollbtn" + idCode).css({
          "margin-top": H - btnH
        });
        $("#scrollbtn" + idCode).attr("tops", H - btnH);
      } else if (top + moveY < 0) {
        $("#scrollbtn" + idCode).css({
          "margin-top": 0
        });
        $("#scrollbtn" + idCode).attr("tops", 0);
      }
    }
  });
  $(document).mouseup(function (e) {
    move = false;
  });

}

在main.js文件中引入

import { scrollY } from "@/utils/scorllbar.js"; //滚动条
Vue.prototype.escrollY = scrollY     //滚动条

在使用el-table地方使用scrollY函数

 


 this.$refs["singleTable"].$nextTick(function () {
            this.escrollY(
              ".el-table__body-wrapper",
              ".el-table__header-wrapper"
            );
          })

效果图