Vue获取电脑及浏览器缩放比例

  mounted() {
    this.$nextTick(() => {
      window.addEventListener("resize", () => { // 监听浏览器窗口大小改变
        // 浏览器变化执行动作
      });
    });
  },

// 方法
detectZoom() {
   let ratio = 0
   const screen = window.screen // 对象包含有关用户屏幕的信息
   // navigator.userAgent获取浏览器信息(类型及系统)
   const ua = navigator.userAgent.toLowerCase()
   // Window.devicePixelRatio(设备像素比)
   if (window.devicePixelRatio !== undefined) {
      ratio = window.devicePixelRatio
   } else if (~ua.indexOf('msie')) {
      if (screen.deviceXDPI && screen.logicalXDPI) {
        ratio = screen.deviceXDPI / screen.logicalXDPI
      }
   } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth
   }
   if (ratio) {
     ratio = Math.round(ratio * 100)
   }
   return ratio
},

参考文档

el-table 自适应中间区域高度

<div ref="container">
    <el-table :data="tableData" :height="tableHeight"></el-table>
</div>

// js
tableHeight: 0,
timer: 0,

mounted () {
    this.calHeight();
    window.addEventListener('resize', this.onResize)
},
beforeDestroy () {
    this.timer && clearTimeout(this.timer)
    window.removeEventListener('resize', this.onResize)
},
// methods
calHeight () {
    this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect()
        this.tableHeight = rect.height - 100
    })
},
onResize () {
    this.timer && clearTimeout(this.timer)
    this.timer = setTimeout(() => {
        this.calHeight()
     }, 500)
},