element的table表格组件有一个max-height属性,可以设置table的最大高度,但是当我设置这个属性的值为百分比或者响应式的时候,却没有生效,如下所示。
max-height:calc(100vh - 40px)
//或者
max-height:calc(100% - 40px)
这是因为element-ui的文档,max-height的合法的值为数字或者单位为 px 的高度。无法识别响应式的css。
解决方法有以下几种:
首先列举出代码:
首先设置table组件的ref属性,以及设置max-height的值。
1. 使用nextTick
<script>
export default {
data() {
return {
tableHeight: 0,
// 另一种写法,不需要在下面mounted
// tableHeight: window.innerHeight * 0.8
}
},
mounted() {
this.$nextTick(()=>{
this.tableHeight = window.innerHeight - 100
})
},
}
</script>
2. 使用CSS设置
<style lang="scss">
.wrapper{
height: calc(100% - 40px);
}
</style>
...
<div class="wrapper">
<el-table ref="table" :data="info" max-height="100%">
...
</el-table>
</div>
该方案只适用于element-ui2.72及以下的版本,2.80及以上ma-height属性不支持百分百,只支持px和数值,但第一种方法仍然有效。
PS:这两种写法并不能设置表格的最大高度随着屏幕大小动态变化,只是实现了表格内容的最大高度,可以保证分页组件一直挨着表格内容下方。如果想动态设置,下面方法会有介绍
3. 使用window.onresize监听屏幕尺寸变化
<el-table :height = 'screenHeight'>
</el-table>
<script>
export default {
data() {
return{
screenHeight: `${document.documentElement.clientHeight}` - 242,
}
},
mounted() {
const that = this;
window.onresize = function listen() {
that.screenHeight = `${document.documentElement.clientHeight}` - 242;
};
},
}
</script>
${document.documentElement.clientHeight} 可以获取到屏幕的高度,然后减去一个固定值就可以保证表格高度自适应了。
mounted加载函数中,如果页面宽高变化,则需要重新获取屏幕的高度值。此时需要用到的是window的一个监听尺寸变化的函数,就是 onresize函数。
第三种方案也有一定的问题,如果打开控制台,这样屏幕高度就会变化,但table的高度并没有实时的刷新变化。其实这个问题也好解决,只需要对屏幕的高度使用watch监听,当屏幕高度变化时,重新调用函数即可,这里不多写了。