0


element-ui的表格组件el-table固定表头后,怎么实现表格高度的自适应呢?

    element-ui的表格组件el-table固定表头,需要设置height,官方文档就是这样规定的(如下图),那么height写什么数值呢?

     如果height写一个固定的数值,那这样会出现一个风险,就是在不同的屏幕尺寸设备,表现的效果也是不一样的,会出现非常难看的情况,这样肯定是不理想的。网上的解决方案五花八门,而且还不一定能实现。面对这样的问题,我写下这篇文章。

    我们常见的后台管理系统大概是长这个样的(如下图),下面我将以这个此图来演示问题。可见,表格是在内容区的。目前,要实现表头固定,并且表格高度自适应,针对这个问题,总结出以下2种方案。

方案一:使用css的方式实现

    给height设置为 **calc(100vh - X ) **,X是什么呢?其实就是顶部导航栏的高度

方案二:使用js的方式实现

       关键代码,如下
export default {
  data() {
    return {
      height: 0,
    }
  },
  mounted(){
    this.autoHeight()
  },
  methods: {
    // 高度自适应
    autoHeight() {
      // 初始化的时候,设置高度
      this.setHeight()
      // 改变浏览器窗口大小的时候,设置高度
      window.addEventListener('resize', () => {
        this.setHeight()
      })
    },
    // 设置高度
    setHeight() {
      this.$nextTick(() => {
        this.height = innerHeight - X // 这里的X就是顶部栏的高度
      })
    }
  }
}

特别说明

    关于X的值,需要你根据您实际情况来计算。我上面图片的举例场景:X 就是顶部导航栏高度。可能你的场景。X 除了顶部导航栏高度,还有加上别的高度,要灵活运用。

    希望本篇文章对你有帮助,如果你有更好的解决方案,欢迎留言评论! 

本文转载自: https://blog.csdn.net/guixin12345/article/details/126572363
版权归原作者 归心xin 所有, 如有侵权,请联系我们删除。

“element-ui的表格组件el-table固定表头后,怎么实现表格高度的自适应呢?”的评论:

还没有评论