vue+elementui中的el-table表格高度自适应设置

项目场景:

vue+elementui中的el-table表格高度自适应设置


问题描述

在vue3中使用到分页的组件但是由于高度不能自适应导致切换分辨率就就被隐藏了


原因分析:

使用自带的属性可以解决大部分的问题但是涉及到其它组件结合使用就会起不到想要的效果


解决方案:

1.使用 :height="tableH" 动态绑定参数

2.给绑定的参数在data中定义初值

3.定义方法使用window.innerHeight计算高度,将此方法在需要执行的地方调用即可

    const resizeone = function() { //设置表格和表单高度
                //获取窗口高度
                var wh = window.innerHeight - 70;
                _this.tableH = wh - 100;
            } 

你可能感兴趣的:(elementui,vue.js,javascript)