封装el-table高度自适应

在Vue框架中，el-table作为一个非常实用的表格组件，可以方便地对表格进行展示、编辑、筛选、排序等操作。但是，在实际使用中我们往往会碰到一个问题，即当表格数据量过大时，el-table的高度无法自适应，导致页面出现滚动条，影响用户体验。

为解决这个问题，可以采用以下方法：

1. 使用v-if条件渲染，当表格数据为空时不渲染el-table组件，或者使用loading等Vue内置指令提示用户等待。

2. 设置表格的max-height属性，当表格数据量超过一定值时，限制表格的最大高度，并自动出现滚动条。

3. 监听窗口变化，实时计算可视区域的高度，并动态地调整表格的高度，从而达到自适应的效果。

示例代码实现如下（以第三种方法为例）：

<template>
<div class="table-wrap" ref="tableWrap">
<el-table :data="tableData" style="width: 100%" :height="tableHeight">
<!--表格列定义-->
</el-table>
</div>
</template>

<script>
export default {
data() {
return {
tableData: [], // 表格数据
tableHeight: 0 // 表格高度
}
},
mounted() {
this.getTableData() // 获取表格数据
window.addEventListener('resize', this.handleResize) // 监听窗口变化
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize) // 销毁时移除监听器
},
methods: {
getTableData() {
// 获取表格数据
// ...
this.tableData = [...]
this.handleResize() // 初始化表格高度
},
handleResize() {
// 计算可视区域高度并动态调整表格高度
const tableWrapEl = this.$refs.tableWrap
const windowHeight = window.innerHeight
const tableWrapOffsetTop = tableWrapEl.getBoundingClientRect().top
const tableWrapMarginBottom = parseInt(window.getComputedStyle(tableWrapEl).marginBottom)
const tableHeight = windowHeight - tableWrapOffsetTop - tableWrapMarginBottom
this.tableHeight = tableHeight > 0 ? tableHeight : 0 // 高度不能为负数
}
}
}
</script>

通过这种方式，可以让el-table组件高度自适应，提高用户体验。