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