Vue elementUI el-table表格实现高度自适应

安装第三方库

npm install element-resize-detector

main.js中导入，实现全局注册

import ElementResizeDetectorMaker from "element-resize-detector"
Vue.prototype.$erd = ElementResizeDetectorMaker()

在组件中应用

一、设置动态属性

<el-table ...... :height="tableHeight">

二、初始化变量

tableHeight: 500,

三、在mouted函数中写入监听方式，详细了解可参考element-resize-detector

mounted() {
this.getBasicList();
//yourClassName可以是组件内任意父组件的元素名称，即class=”yourClassName”
    this.$erd.listenTo(document.getElementsByClassName("yourClassName"), (e) => {
      this.tableHeight = e.offsetHeight - 100;//根据自己的需求设值
    });
  },

到此就可以实现高度自适应了