vue高度或表格自适应屏幕一屏显示

一、el-card自动适配屏幕高度//template部分<el-card class="box-card card-height" :style="conheight"></el-card>//script部分data(){return{conheight: {height: "",},}}//created部分created() {window.addEventList

浅巷长歌999

2935人浏览 · 2021-07-05 14:39:22

浅巷长歌999 · 2021-07-05 14:39:22 发布

一、el-card自动适配屏幕高度

//template部分
<el-card class="box-card card-height" :style="conheight">
</el-card>

//script部分
data(){
	return{
		conheight: {
	        height: "",
	    },
	}
}

//created部分
created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
},

//methods部分
getHeight() {
 	this.conheight.height = window.innerHeight - 170 + "px";
},

二、el-table自动适配屏幕高度

//template部分
<el-table :data="chooseIndexData" :height="tableHeight"></el-table>

//script部分
data(){
	return{
		tableHeight: this.tableHeight,
	}
}

//mounted部分
mounted() {
	this.tableHeight = (window.innerHeight - 220) / 2 + "px"; //260即表格之外的固定高度
	window.onresize = () => {
	  return (() => {
	    this.tableHeight = (window.innerHeight - 220) / 2 + "px";
	  })();
	};
},