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属性以适应父元素的高度。同时，它还会在浏览器窗口大小改变时重新计算并设置表格高度。需要注意的是，父元素的高度应该是可用的