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