el-table自适应高度
时间: 2023-11-07 13:51:58 浏览: 113
要实现el-table的自适应高度,可以按照以下步骤进行操作:
1. 在el-table中动态绑定一个高度,并在data中声明tableHeight。
```html
<el-table ref="multipleTable" :data="tablist" style="width: 100%" v-if="tableHeight" :height="tableHeight"></el-table>
```
```javascript
data() {
return {
tableHeight: "",//表格高度
}
}
```
2. 声明一个方法来计算el-table的高度。
```javascript
methods: {
//计算table高度(动态设置table高度)
getTableHeight() {
let tableH = 210; //距离页面下方的高度
let tableHeightDetil = window.innerHeight - tableH;
if (tableHeightDetil <= 300) {
this.tableHeight = 300;
} else {
this.tableHeight = window.innerHeight - tableH;
}
},
}
```
3. 在mounted钩子函数中,通过计算窗口高度、表格距离顶部距离和需求高度来设置tableHeight,并更新表格防止内容变化引起异常情况。同时,监听窗口大小变化,实时更新tableHeight。
```javascript
mounted() {
let that = this;
this.$nextTick(() => {
this.tableHeight = window.innerHeight - this.$refs.table_e.$el.offsetTop - 200; //窗口高度-表格距离顶部距离-需求高度
this.$refs.table_e.doLayout(); //更新表格防止表格内容变化表格异常情况
//监听窗口大小变化
window.onresize = function() {
that.tableHeight = window.innerHeight - that.$refs.table_e.$el.offsetTop - 200;
that.$refs.table_e.doLayout();
};
});
},
```
以上就是实现el-table自适应高度的方法。
阅读全文