elementui表格高度自适应

最新推荐文章于 2024-07-30 08:40:27 发布

月亮和我

最新推荐文章于 2024-07-30 08:40:27 发布

阅读量3.8k

点赞数 4

分类专栏： vue 文章标签： elementui html5 vue.js

本文链接：https://blog.csdn.net/weixin_44356010/article/details/120758580

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍如何在Vue项目中使用ElementUI组件库的表格（el-table）实现高度自适应，通过监听浏览器窗口的resize事件，动态计算表格的高度，确保表格始终充满视口并保持一定的间距。代码示例展示了在mounted生命周期钩子中设置初始高度和调整高度的方法。

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

elementui表格高度自适应


<el-table
      :data="tableData"
      style="width: 100%"
      border
      :height="heights"
      ref="refsTable"
    >
</el-table>


//根据浏览器高度设置初始高度，并监听浏览器高度变化，改变表格高度，100表示表格距离浏览器的高度
	mounted(){
	    this.$nextTick(() =>{
	      // 根据浏览器高度设置初始高度
	      this.heights = window.innerHeight - this.$refs.refsTable.$el.offsetTop - 100
	      // 监听浏览器高度变化，修改表格高度
	      window.onresize = () =>{
	        this.heights = window.innerHeight - this.$refs.refsTable.$el.offsetTop - 100
	      }
	    })
 	 },