el-table 自适应高度
时间: 2023-11-08 17:04:50 浏览: 81
可以通过设置 el-table 的 max-height 和 height-mode 属性来实现自适应高度。其中,height-mode 属性设置为 'maxHeight' ,max-height 属性可以根据 el-table 容器的高度自适应调整 el-table 组件的高度。具体代码如下:
```
<el-table :data="tableData" height-mode="maxHeight" :max-height="maxHeight">
```
相关问题
el-table自适应高度
要实现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自适应高度的方法。
vue el-table自适应屏幕
以下是VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法:
```html
<template>
<div class="table-container">
<el-table
:data="tableData"
style="width: 100%"
:row-style="{height: '50px'}"
:header-row-style="{height: '50px'}"
:fit="false"
:height="tableHeight"
ref="table"
>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址" width="180"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2021-01-01',
name: '张三',
address: '北京市朝阳区'
},
{
date: '2021-01-02',
name: '李四',
address: '上海市浦东新区'
},
{
date: '2021-01-03',
name: '王五',
address: '广州市天河区'
}
],
tableHeight: 0
}
},
mounted() {
this.getTableHeight()
window.addEventListener('resize', this.getTableHeight)
},
beforeDestroy() {
window.removeEventListener('resize', this.getTableHeight)
},
methods: {
getTableHeight() {
const tableHeight = document.documentElement.clientHeight - this.$refs.table.$el.offsetTop - 50
this.tableHeight = tableHeight
}
}
}
</script>
<style>
.table-container {
height: 100%;
overflow: auto;
}
</style>
```
在这个例子中,我们使用了ElementUI的el-table组件,并且设置了表格的高度为tableHeight。在mounted钩子函数中,我们调用了getTableHeight方法来获取表格的高度。在getTableHeight方法中,我们使用了document.documentElement.clientHeight来获取浏览器窗口的高度,然后减去表格距离浏览器窗口顶部的距离和表头的高度,得到表格的高度。最后,我们将计算出来的表格高度赋值给tableHeight即可。