欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 高考 > vue+element 根据父容器动态设置table高度出滚动条

vue+element 根据父容器动态设置table高度出滚动条

2025/2/23 14:08:19 来源:https://blog.csdn.net/xu_duo_i/article/details/140872233  浏览:    关键词:vue+element 根据父容器动态设置table高度出滚动条

可以通过CSS样式来控制表格的高度,并使用JavaScript动态地设置这个高度。

HTML:

<template><el-table:data="tableData":height="tableHeight"style="width: 100%"><!-- 列配置 --></el-table>
</template>

js:

<script>
export default {data() {return {tableData: [// 数据列表],tableHeight: '' // 初始高度};},mounted() {this.setTableHeight();window.addEventListener('resize', this.setTableHeight);},beforeDestroy() {window.removeEventListener('resize', this.setTableHeight);},methods: {setTableHeight() {const parentHeight = this.$el.parentNode.clientHeight; // 获取父容器高度this.tableHeight = parentHeight - 100 + 'px'; // 减去其他元素高度,保留一定空间}}
};
</script>

css:确保父级有高度:(父级是自适应%高度也可以,但是不能没有!!!)

<style scoped>
/* 确保父容器有高度 */
.el-table {width: 100%;
}
</style>

说明:在这个示例中,表格组件在被挂载后会计算其父元素的高度,并设置表格的height属性以适应父元素的高度。同时,它还会在浏览器窗口大小改变时重新计算并设置表格高度。需要注意的是,父元素的高度应该是可用的

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词