element ui table组件高度笔记本和台式显示不同
时间: 2023-07-01 16:07:23 浏览: 59
这种情况可能是因为笔记本电脑和台式电脑的屏幕分辨率不同导致的,可以尝试通过设置表格的高度属性来解决这个问题。
你可以通过以下两种方式来设置表格的高度:
1. 直接设置表格的高度属性为固定值,例如:height: '500px'。
2. 使用计算属性动态计算表格的高度,例如:
```javascript
<template>
<el-table :data="tableData" :height="tableHeight">
<!-- 省略表格列定义 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [],
tableHeight: 0,
};
},
mounted() {
this.tableHeight = this.getTableHeight();
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
getTableHeight() {
const tableContainer = this.$el.querySelector('.el-table__body-wrapper');
return tableContainer.getBoundingClientRect().height;
},
handleResize() {
this.tableHeight = this.getTableHeight();
},
},
};
</script>
```
上面的代码中,我们通过计算表格容器的高度来动态设置表格的高度,并且在窗口大小改变时重新计算表格的高度。这样就可以保证表格在不同屏幕分辨率下都能正确显示。