vue设置表格高度自适应
<el-tablesize="medium":default-sort="defaultSort":data="tableList"ref="tab"class="mt20":style="{'width':'100%'}":height="tableHeight...
·
<el-table
size="medium"
:default-sort="defaultSort"
:data="tableList"
ref="tab"
class="mt20"
:style="{'width':'100%'}"
:height="gloable_tableHeight"
v-loading="isLoading"
@sort-change="changeTable"
></el-table>
data(){
return {
gloable_screenHeight: 0,//浏览器窗口的文档显示区的高度
gloable_tableHeight: null,//table的高度
}
},
watch: {
// '$data': {
// handler(newVal, oldVal) {
// let param = {
// path : window.location.href,
// data : this.$data
// }
// this.$store.dispatch('setCache',param);
// },
// // immediate: true,
// deep: true
// },
gloable_screenHeight: {
handler(n, o) {
// 初始化表格高度
if (n) {//监听窗口的ping文档显示区的高度的变化(90,15,39,50)分别代表分页的高度+padding:20+margin:20,section的padding:15,底部footer的高度39,顶部header的高度50
//设计原理为文档显示区的高度=(分页类的高度)+table高度+section的padding+底部footer的高度+顶部header的高度
this.gloable_tableHeight =
n -
90-15-39-50+
"px";
}
},
immediate: true,
deep: true
}
},
mounted() {//第一次获取文档显示区的高度的变化
this.gloable_screenHeight = window.innerHeight;
},
updated(){//实时监测文档显示区的高度的变化
window.onresize = () => {
return (() => {
this.gloable_screenHeight = window.innerHeight;
})();
};
},
更多推荐
已为社区贡献16条内容
所有评论(0)