2021-07-08

最新推荐文章于 2024-10-06 14:15:37 发布

weixin_50695864

最新推荐文章于 2024-10-06 14:15:37 发布

阅读量48

点赞数

分类专栏： vue 列表自适应文章标签： vue.js css javascript

原文链接：https://www.cnblogs.com/muou2125/p/9952491.html

版权

vue 列表自适应专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue + elementUi中el-table表格高度自适应

首先html里设置table的高度

  <el-table ref="recordTable" :data="tableData" border :height="tableHeight">
<el-table>

 data(){
	return {
		tableHeight: 50 //默认初始值
	}
}

** 根据浏览器高度设置初始高度，并监听浏览器高度变化，改变表格高度，70表示表格距离浏览器的高度**

 mounted(){
    this.$nextTick(() =>{
      // 根据浏览器高度设置初始高度
      this.tableHeight = window.innerHeight - this.$refs.recordTable.$el.offsetTop - 70
      // 监听浏览器高度变化，改变表格高度
      window.onresize = () =>{
        this.tableHeight = window.innerHeight - this.$refs.recordTable.$el.offsetTop - 70
      }
    })
  },