element-ui表格如何自适应高度效果示例

更新时间：2023年08月03日 11:35:51 作者：柠檬加栤

这篇文章主要给大家介绍了关于element-ui表格如何自适应高度的相关资料,Element UI的Table组件默认情况下是没有自适应高度的,文中给大家介绍了解决的办法,需要的朋友可以参考下

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高度自适应的效果啦~~，拖拽可视窗口高度时，表格在实时更新数据会出现抖动

补充知识：element ui table组件高度笔记本和台式显示不同

这种情况可能是因为笔记本和台式的分辨率不同，导致元素的大小显示不同。您可以通过设置表格组件的高度为固定值或百分比来解决此问题，以适应不同的设备。

例如，您可以使用以下 CSS 样式来设置表格组件的高度为 500 像素：

.el-table {
  height: 500px;
}

或者使用以下 CSS 样式将表格组件的高度设置为页面高度的 80%：

.el-table {
  height: 80vh;
}

这样，无论在笔记本还是台式电脑上，表格组件都会以相同的高度显示。

总结

到此这篇关于element-ui表格如何自适应高度的文章就介绍到这了,更多相关element-ui表格自适应高度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解vue数组遍历方法forEach和map的原理解析和实际应用
这篇文章主要介绍了详解vue数组遍历方法forEach和map的原理解析和实际应用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
Vue获取初始化数据是放在created还是mounted解读
这篇文章主要介绍了Vue获取初始化数据是放在created还是mounted的问题解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue 图片转base64本地路径跨域方式
这篇文章主要介绍了vue 图片转base64本地路径跨域方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-02-02
用electron 打包发布集成vue2.0项目的操作过程
这篇文章主要介绍了用electron 打包发布集成vue2.0项目的操作步骤,把electron 加入到自己项目中各种不兼容，升级版本踩坑无数个，今天通过本文给大家分享下详细过程，需要的朋友可以参考下
2022-10-10
vue.js中methods watch和computed的区别示例详解
methods,watch和computed都是以函数为基础的,但各自却都不同,这篇文章主要给大家介绍了关于vue.js中methods watch和computed区别的相关资料,需要的朋友可以参考下
2021-08-08
传说中VUE的语法糖到底是做什么的
从接触Vue我们就知道 v-model是实现数据双向绑定的那他能实现绑定的原理到底是啥？最常见的语法糖 v-model，今天通过案例给大家详细介绍下，需要的朋友参考下吧
2021-09-09
详解vue-template-admin三级路由无法缓存的解决方案
这篇文章主要介绍了vue-template-admin三级路由无法缓存的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
Vue路由跳转与接收参数的实现方式
这篇文章主要介绍了Vue路由跳转与接收参数的实现方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
教你轻松解决Vue Dialog弹窗诟病
弹窗经常被使用在一些表单的增删改查啊,或者弹出一些提示信息等等,这篇文章主要给大家介绍了关于Vue Dialog弹窗诟病解决的相关资料,需要的朋友可以参考下
2023-01-01
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
这篇文章主要介绍了浅谈vue中关于checkbox数据绑定v-model指令的个人理解,v-model用于表单的数据绑定很常见，下面就来详细的介绍一下
2018-11-11