element 中 el-table高度自适应

第一种方法

1.在el-table中加 :height="tableHeight"

 <el-table
      :data="tableData"
      :fit="true"
      :highlight-current-row="true"
      style="width: 100%"
      :height="tableHeight"
    >

2.data中声明

data(){
	return {
        //表格高度
		tableHeight: ""
	}
}

3.在created中调用下面方法

 methods: {
   //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 280; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
  }

4.

  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  }

第二种方法:

直接加 max-height="距离底部高度"即可

<el-table
      :data="tableData"
      max-height="500"
      :key="sTable"
    ></el-table>