element-ui 表格如何自适应高度-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui 表格如何自适应高度。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、el-table增加max-height属性

<el-table :max-height="tableHeight" ref="queryForm">

2、data增加tableHeight变量

data() {
  return {
      // 表格高度
      tableHeight: 200,
	 
  }
};

3、mounted获取计算高度，每次需要刷新页面才能自适应

mounted() {
  this.$nextTick(() => {
    // window.innerHeight 浏览器窗口的可见高度，下面的 220 是除了table最大高度的剩余空间。
    let height = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 220;
    this.tableHeight = height;
  })
},

虽然这时候，已经可以根据窗体大小，高度动态变化，但是，还要每次刷新才行……

所以，我们需要加一个监听器即可，监听窗体大小变化，一旦变化就执行方法重新设定tableHeight

methods: {
    getHeight() {
      this.$nextTick(() => {
        // window.innerHeight 浏览器窗口的可见高度，下面的 220 是除了table最大高度的剩余空间。
        console.log(1111,window.innerHeight);
        let height = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 220;
        this.tableHeight = height;
      })
    }
  },
  created() {
    window.addEventListener('resize', this.getHeight())
  },


 //可有可无
destroyed () {
    window.removeEventListener('resize', this.getHeight())
  }

这里还有个需要注意的地方，就是修改下el-table的css，否则table会有很多留白，看起来体验不是很好

这里使用了::v-deep ，否则我们是修改不了 element自带的样式。

::v-deep .el-table {
  .el-table__body {
    height: 100%;
  }
}

自此，就能达到table高度自适应的效果啦~~，拖拽可视窗口高度时，表格在实时更新数据会出现抖动文章来源地址https://www.toymoban.com/news/detail-502776.html

到了这里，关于element-ui 表格如何自适应高度的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

element-ui 表格如何自适应高度

1、el-table增加max-height属性

2、data增加tableHeight变量

3、mounted获取计算高度，每次需要刷新页面才能自适应

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2