vue2，实现不同分辨率下高度不同

最新推荐文章于 2025-06-25 17:32:53 发布

原创最新推荐文章于 2025-06-25 17:32:53 发布 · 691 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

文章讲述了在使用ElementUI的el-table组件时，如何根据浏览器窗口分辨率的变化动态调整table的高度，通过在mounted生命周期函数中监听窗口尺寸并设置height属性来实现响应式设计。

问题：使用el-table组件时，分辨率不同下表格显示有问题，这时候需要把el-table的height属性设置为动态的，

data中定义


 data() {
    return {
   windowHeight: "",
}}

实时监听浏览器窗口分辨率变化，因为监听的是浏览器的窗口变化事件所以最好写在mounted周期里

  mounted() {
    // 实时监听页面宽度变化
    this.watchScreenHeight()
    window.onresize = () => {
      return (() => {
        this.watchScreenHeight()
      })()
    }
  },

methods:{
    watchScreenHeight() {
      // console.log(document.body.clientWidth, "页面宽度");
      if (document.body.clientWidth <= 1280 && document.body.clientWidth > 1100) {
        this.windowHeight = "83%"
      }
      if (document.body.clientWidth > 1300 && document.body.clientWidth < 2500) {
        this.windowHeight = "90%"
      }
      if (document.body.clientWidth > 2510) {
        this.windowHeight = "92%"
      }
    },
}

document.body.clientWidth是计算浏览器的可视宽度