实现效果:分页永远贴着浏览器底部,放大和缩小浏览器大小,数据显示增多和减少
1、缩小
2、放大
实现过程:
1、el-table标签内添加ref="sortTable"和:height="sortTableHeight"
2、定义sortTableHeight: 350
<el-table
ref="sortTable"
:height="sortTableHeight"
style="width: 100%;"
border
:row-style="tableRowClassName"
:stripe="false"
:header-cell-style="{background: '#EBEEF5',border: '0px solid #DDDDDD',height: '10px',color:'#2B579A'}"
:data="tableData">
<el-table-column v-for="(item,index) in tableDataTitle"
:show-overflow-tooltip="true"
:key="index"
:prop=tableDataTitle[index]
:label=tableDataTitle[index]
width="auto">
</el-table-column>
</el-table>
3、添加方法getTableHeight,然后把方法挂载到mounted,初始化页面的时候调用。如果是子组件的话,需要在父组件调用此方法。自己调整exceptHeight ,调整到合适的大小。
/*表格自适应高度*/
getTableHeight(){
this.$nextTick(function () {
let exceptHeight = 380;
// this.$refs.table.$el.offsetTop:表格距离浏览器的高度
if(this.$refs.sortTable.$el){
this.sortTableHeight = window.innerHeight - this.$refs.sortTable.$el.offsetTop - exceptHeight;
}
// 监听窗口大小变化
let self = this;
window.onresize = function() {
if(self.$refs.sortTable.$el){
self.sortTableHeight = window.innerHeight - self.$refs.sortTable.$el.offsetTop - exceptHeight;
}
}
});
},
版权声明:本文为weixin_46359814原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。