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之监听页面是否以到底部问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文介绍了基于MessageChannel实现Vue AI流式对话的方案,通过SSE流式解析、时间切片、任务队列等技术,实现了非阻塞UI渲染和完美处理分包粘包问题,同时提供了一套可复用的Hook,并进行了详细的对比分析,需要的朋友可以参考下2026-04-04
基于Vue3实现前端埋点上报插件并打包发布到npm的详细过程
这篇文章主要介绍了基于Vue3实现一个前端埋点上报插件并打包发布到npm,本项目采用pnpm进行Monorepo环境搭建,因为未来这个项目可能会加入更多的工具包，需要的朋友可以参考下2022-10-10
在现代 web 开发中,用户与系统的交互体验越来越重要,而文件上传和文件预览是最常见的交互场景之一,本文将详细介绍如何在 Vue 项目中使用 Vue Elements 来实现文件预览的功能,包括基本使用方法、常见实例、性能优化以及样式自定义等内容,需要的朋友可以参考下2025-01-01
下面小编就为大家分享一篇webpack vue项目开发环境局域网访问方法，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了Vuejs实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
当遍历一个数组或枚举一个对象进行迭代循环展示时，就会用到列表渲染指令 v-for。这篇文章主要介绍了Vue.js 中的 v-for 列表渲染指令,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了element-ui中按需引入的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了vue中如何动态设置css样式的hover，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了一起写一个即插即用的Vue Loading插件实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
最新评论