表格高度自适应

方法一：

<Table :height="tableHeight" border :columns="addBao" :data="addBaoTable"></Table>

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

<Table border :columns="columns" :data="columnsdata" :height="tableHeight" class="tbs"></Table>

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();
		}

第三种方法
在表格属性添加 ref=“table”， :height=“tableHeight”

<Table border :columns="columns1" :data="data1" ref="table"   :height="tableHeight" ></Table>

在data里面添加表格初始高度

data(){
    return  {
           tableHeight:100,
      }
}

 mounted() {
      /*    
        表格高度自适应
          window.innerHeight是浏览器的可用高度  ，
          this.$refs.table.$el.offsetTop是表格距离浏览器可用高度顶部的距离
          减去60,因为分页要的高度
        */
          this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 60
      }