Layui 实现表格横滚动条隐藏,悬停显示

  1. 效果
  2. 添加覆盖样式
    .layui-table-body{
        overflow-x:hidden;
    }
    
    .layui-table-body:hover{
        overflow-x:auto;
    }
    相信这一步大部分人都知道,但是使用固定列时,固定列就会把滚动条覆盖了,这是因为layui判断table 的高时少了滚动条的大小,就会出现如下效果
    Layui 实现表格横滚动条隐藏,悬停显示_第1张图片
  3. 修改源码
    >接下来就要修改源码了,如果是没有压缩的 table.js,搜索“layFixed.find(ELEM_BODY).css”,在1226行,
    that.layFixed.find(ELEM_BODY).css('height', layMainTable.height() >= fixHeight ? fixHeight : 'auto'); //修改前
    
    that.layFixed.find(ELEM_BODY).css('height', layMainTable.height() >= fixHeight - 16 ? fixHeight - 16 : 'auto'); //修改后
    >如果是压缩的table.js,或者是 压缩的 layui.all.js ,搜索“layFixed.find(k).css”
    e.layFixed.find(k).css("height",i.height()>=d?d:"auto") //修改前
    
    e.layFixed.find(k).css("height",i.height()>=d-16?d-16:"auto") //修改后
    注:16 表示滚动条的宽度,这个值看情况而定,因为不同浏览器都不一样。
    

你可能感兴趣的:(layui,layui,table,滚动条,隐藏,悬停显示)