表单高度自适应

方法一：

import {getClassNameHeight} from '@/utils/index.js';//引入获取高度方法

data(){
	return{
		tableHeight: 300, //表单高度385
	}
}

methods:{
		getTableHeight() { //获取表格高度
				let _this = this;
				this.$nextTick(() => {
					try {
						let sectionRightH = getClassNameHeight('section-right');
						let ivuBreadcrumbH = getClassNameHeight('tableHeader');
						let ivutabsH = getClassNameHeight('ivu-tabs-bar');
						let tabsH = getClassNameHeight('ivu-tabs-nav-scroll ');
						let ivuPageH = getClassNameHeight('ivu-page');
						_this.tableHeight = sectionRightH - (ivuBreadcrumbH + ivutabsH + tabsH + ivuPageH + 30);
					} catch (err) {
						console.log(err)
					}
				})
			},
},
mounted() {
			this.getTableHeight();
		}

方法二：

data(){
	return{
			balanceH: 0,
	}
}，

methods:{
	Height() {
				this.$store.dispatch("figure");//vuex获取高度
			},
}，
computed: {//计算高度
			height() {
				return this.$store.state.user.height - this.balanceH;
			}
},

mounted(){
		this.Height();
		let balance = document.getElementsByClassName("top")[0].clientHeight; //不同屏幕高度计算差额
		this.balanceH = balance;
}，

vuex

state:{
	height:'',
},

mutations:{
figure:state =>{ 
            state.height=parseInt(document.body.clientHeight)-165;
        },
}

第三种：最易理解

html

js
data(){
return{
tableHeight = 300,
}
},
methods:{
getTableHeight() { //获取表格高度
let _this = this;
this.$nextTick(() => {
try {
let sectionRightH = document.getElementsByClassName(‘sider-container’)[0].clientHeight;
let ivuBreadcrumbH = document.getElementsByClassName(‘searchContent’)[0].clientHeight;
let ivuPageH = document.getElementsByClassName(‘page’)[0].clientHeight;
_this.tableHeight = sectionRightH - (ivuBreadcrumbH + ivuPageH);//
} catch (err) {
console.log(err);
}
})
},
},
mounted() {
this.getTableHeight();
this.loadData();
}