Element el-table表格高度根据浏览器窗口大小动态改变

最新推荐文章于 2024-08-12 10:45:55 发布

和世界不一样，那就不一样！

最新推荐文章于 2024-08-12 10:45:55 发布

阅读量3.4k

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_44834981/article/details/130489757

版权

文章介绍了如何使用Vue.js和ElementUI库使表格高度根据浏览器窗口大小动态调整，从而实现自适应效果。关键在于利用`window.innerHeight`获取窗口高度，并在`created`和`mounted`钩子函数中设置表格的高度，同时监听`onresize`事件以应对窗口尺寸变化。

摘要由CSDN通过智能技术生成

ue+Element ui表格高度根据浏览器高度自适应

固定表格高度，Element文档里说了，可以加height属性。

比如：

<el-table  :data="tbData" stripe border height="500"></el-table>

给height一个高度，这样是可以解决表头固定的问题。但是又会出现一个问题，就是不同的电脑分辨率是不一样的，500高度在小分辨屏幕可能是可以的，但是大屏幕上就很不合适了。所以我们要给这个height一个动态的值。
我们在data里定义一个tableHeight，在mounted生命周期函数里添加一个方法：

 <el-table :data="tableData" style="width: 100%" :height="tableHeight">
        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      </el-table>

创建时获取窗口高度，在created（）执行
onresize 事件，在Vue页面mounted调用onresize监听事件 onresize 事件会在窗口或框架被调整大小时发生。

created() {
    // 100是表格外其它布局占的高度，这个数值根据自己实际情况修改
    this.tableHeight = window.innerHeight - 100
  }

  mounted() {
    // 设置表格高度
    this.tableHeight = window.innerHeight - 100
    // / 监听浏览器窗口变化，动态计算表格高度，
    window.onresize = () => {
      return (() => {
        this.tableHeight = window.innerHeight - 100
      })()
    }
  }

生成效果图：
在这里插入图片描述
完整代码：

<template>
  <div class="aside">
        <el-table :data="tableData" style="width: 100%" :height="tableHeight">
        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class LoginLeft extends Vue {
  tableData = [
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄'
    },
    {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    }
  ]
  tableHeight = 0
  created() {
    // 100是表格外其它布局占的高度，这个数值根据自己实际情况修改
    this.tableHeight = window.innerHeight - 100
  }

  mounted() {
    // 设置表格高度
    this.tableHeight = window.innerHeight - 100
    // / 监听浏览器窗口变化，动态计算表格高度，
    window.onresize = () => {
      return (() => {
        this.tableHeight = window.innerHeight - 100
      })()
    }
  }
}
</script>