先来说下需求:
表格中的数据,一般分页的时候会导致侧边栏有垂直滚动条,然后由于字段过多,所以水平也有滚动条,想要实现的效果就是无论分页多少,滚动条的位置一直是不变的(水平滚动条一直固定在底部;垂直滚动条固定或者不要)
另外就是需要根据不同屏幕的分辨率进行自适应调整。
实现
1、首先 需要在表格添加对应的字段:
ref="moviesTable"
:height="tableHeight"
:绑定指定的高度
<el-table v-loading="loading" :data="queryList" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName" ref="moviesTable" @row-click="clickRow" :height="tableHeight">
2、然后声明对应的字段;
之后监听窗口变化,根据窗口变化自适应计算高度;
export default { data(){ return { //表格高度 tableHeight: 0, } }, mounted:function(){ this.$nextTick(function(){ this.tableHeight = window.innerHeight - this.$refs.moviesTable.$el.offsetTop - 160; // 监听窗口大小变化 let that= this; window.onresize = function() { //this.$refs.moviesTable.$el.offsetTop:表格距离浏览器的高度 that.tableHeight = window.innerHeight - that.$refs.moviesTable.$el.offsetTop - 160 } }) } }