admin管理员组

文章数量:1570216

一、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";
	  })();
	};
},

本文标签： 自适应表格高度屏幕vue

版权声明：本文标题：vue高度或表格自适应屏幕一屏显示 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1727666853a1124711.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。