avue表格因页面缩放导致错位问题解决

avue表格因页面缩放导致错位问题解决

一、前置知识

• avue错位问题可以通过重新渲染解决this.$refs.originPlace.refreshTable();

  参考:Avue使用心得

• 页面缩放的监听方法window.onresize

  1. 尝试在vue中使用window.onresize 时不生效，采用addEventListener方式书写才能生效；

  参考：vue中window.onresize无效的解决方案

  2. 在mounted中设置对resize的监听即可实现监听页面尺寸改变；

  参考：window.onresize事件在vue项目中的应用

二、实际代码：

<template>
  <div>
    <avue-crud ref="originPlace"></avue-crud>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        screenWidth: document.documentElement.clientWidth, // 屏幕宽度
      }
    },
    mounted() {
      // 页面尺寸改变,重新渲染avue表格,避免表格错位
      window.addEventListener(
        'resize',
        () => {
          if(Math.abs(this.screenWidth - document.body.clientWidth) > 20) {
            this.$nextTick(() => {
               this.$refs.originPlace.refreshTable();
            })
          }
          this.screenWidth = document.body.clientWidth;
        }
      )
    },
  }
</script>