el-table设置高度自适应，动态设置height

前提：

当遇到不同浏览器不同屏幕尺寸时，想让el-table有个自适应的高度。只需三个步骤即可实现。

---

1、 首先在el-table中动态绑定一个高度 :height="tableHeight", 并在data中声明tableHeight。 

 <el-table
      ref="multipleTable"
      :data="tablist"
      style="width: 100%"
      v-if="tableHeight"
      :height="tableHeight"
    >
</el-table>

 

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

2、 声明一个方法来计算el-table高度

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

3、 在created中调用该方法并给mounted挂载window.onresize事件

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

4、 最后保存，可以通过修改 tableH = 210; 来修改距离页面下方的高度查看效果。