element UI table固定表头出现滚动条与页面滚动条冲突

解决思路：鼠标进入存放table的div页面滚动条消失，table滚动条滚动，离开页面滚动条出现

<template>
  <div class="content">
    <div class="table" @mouseover="tableHover" @mouseout="tableOut">
      <!-- table -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    //鼠标滑过事件
    tableHover() {
      let dom = document.querySelector(".box"); //出现滚动条的div
      let child = document.querySelector(".content"); //显示内容的div
      dom.style.height = "100vh";
      /**
       * 17px滚动条的宽度，padding的原因因为使用了rem布局，滚动条的显示隐藏会造成页面的宽度缩放
       */
      child.style.paddingRight = "17px";
      dom.style["overflow-y"] = "hidden";
    },
    //鼠标离开事件
    tableOut() {
      let dom = document.querySelector(".box");
      let child = document.querySelector(".content");
      dom.style.height = "unset";
      child.style.paddingRight = "0px";
      dom.style["overflow-y"] = "auto";
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

希望有更好解决办法的朋友可以分享一下。