el-table表格自适应

  1. 实现方案

  • 1、el-table的height值绑定一个计算函数

el-table表格自适应_第1张图片

                   :height="computedTableHeughtValue"  

>

2、定义窗口高度的变量

windowHeight: window.innerHeight, 

3、计算函数:当windowHeight的值发生变化的时候 ,会重新进行计算高度,

el-table表格自适应_第2张图片

 4、在页面初始化和销毁前添加或取消监听窗口变化

el-table表格自适应_第3张图片

beforeDestroy() {  

window.removeEventListener('resize', this.updateWindowHeight);

},

mounted() {  

window.addEventListener('resize', this.updateWindowHeight);

},

methods:{

   updateWindowHeight(){

        this.windowHeight=window.innerHeight;

   }

}

  

完结 

你可能感兴趣的:(vue.js,elementui,前端,前端框架)