虽然layui已经很老了 但是还是有很多东西在用着

今天遇到了一个问题 就是窗口缩放后 分页就出去了 table底部是变形的 很难看 当时就感觉是因为 soulTable 这个插件的问题 最后发现果然如此

说下解决吧 直接对layui进行修改

找到 Class.prototype.fullSize

在减去分栏的高度下面 添加

    // 减去筛选插件高度
    if(this.layBorderBox.find(".soul-bottom-contion")[0]){
      bodyHeight -= (this.layBorderBox.find(".soul-bottom-contion")[0].offsetHeight || 31);
    }

然后还需要改一下 soulTable.css 因为筛选条件的宽度是写死的 缩小之后 按钮会变到下一行

找到

/*底部筛选*/
.soul-bottom-contion {
    height: 31px;
    /*line-height: 29px;*/
    border-top: solid 1px #e6e6e6;
}

改为

/*底部筛选*/
.soul-bottom-contion {
    height: 31px;
    /*line-height: 29px;*/
    border-top: solid 1px #e6e6e6;
    position: relative;
}

然后找到

.soul-bottom-contion .editCondtion {
    height: 30px;
    float: right;
}

改为

.soul-bottom-contion .editCondtion {
    height: 30px;
    float: right;
    position: absolute;
    right: 0;
}

直接固定定位 这样就不会到下一行(因为再改条件框的宽度有点麻烦 虽然也可以)

这样就解决问题了

因为每次窗口宽度变化的时候 layui会调用resize方法 然后就会调用fullSize 但是如果固定高度 内部又没有减掉插件占用的高度 就会导致高度太高超出
layBorderBox 就是当前表格最外层的盒子 所以这段代码不会因为页面上有好几个table出现问题