el-table根据容器大小自适应滚动条-修改滚动条样式

需求:父容器里有多个容器为上下级,之后浏览器在缩放的时候,上面容器高度改变了,所以el-table被挤压,如果el-table设置的是固定的高度,那么挤压后内容超出父容器,本文章就是解决这个问题

不自适应错误用法:浏览器伸缩挤压后元素超出了

el-table根据容器大小自适应滚动条-修改滚动条样式_第1张图片

 1.在el-table的父容器上添加class

table_height_big:用于控制浏览器屏幕在大于多少时的样式

table_height_small':浏览器宽高小于多少的样式

tableClass :变量用于类名切换,默认在data中为true

关键代码::class="tableClass ? 'table_height_big' : 'table_height_small'"

  

 2.类名样式修改

这个40px,是浏览器在大于多少的时候,最上面元素的值

124就是浏览器小于1350的时候,顶部元素高度值,可以根据自己的元素高度来调整

el-table根据容器大小自适应滚动条-修改滚动条样式_第2张图片 

el-table根据容器大小自适应滚动条-修改滚动条样式_第3张图片

    .table_height_big {
        height: calc(100% - 62px);
    }
    .table_height_small {
        height: calc(100% - 124px);
    }
::v-deep .el-table {
  height: 88%;
  .el-table__body-wrapper {
    height: calc(100% - 48px) !important; // 表格高度减去表头的高度
    overflow-y: auto;
  }
}

3.在mounted中添加window.addEventListener用于监听浏览器的宽高

window.innerWidth:当前浏览器的宽度为多少,我这边写的是如果是小于1350的话就修改类名,这个值需要你自己测试下宽度为多少才会换行,换行的时候修改类名就行

   mounted() {
        this.internetCardQuery();
        window.addEventListener('resize', this.internetCardQuery);
    },
    methods: {
        internetCardQuery() {
            if (window.innerWidth < 1350) {
                this.tableClass = false;
            } else {
                this.tableClass = true;
            }
        }
    },

4.销毁时取消监听

   beforeDestroy() {
        // 取消监听
        window.removeEventListener('resize', this.internetCardQuery);
    }

5.完整代码






6.效果

 文章到此结束,希望对你有所帮助~~

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