layui table 使用 soulTable 窗口改变大小后 表格变形 分页超出的解决办法
内容目录

虽然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出现问题

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇