解决layui table 数据表格固定列与表格不对齐，高度不一致

茶白

2021 年 11 月 08 日

暂无评论

2857字数

JavaScript

# 解决layui 数据表格固定列与表格不对齐，高度不一致

### layui table表格数据不是默认的高度的时候,就会出现固定列与表格不对齐的情况

![请输入图片描述](https://uploads.cdn.11dz.cn/funAssessment/img/9fbfabb2-fd23-41fa-b7be-d37f51a3a658.png)

### 解决：在表格的done 回调中     `table.render等`

```js
done: function (index, layero) {
        //表头部分
        //动态监听表头高度变化，冻结行跟着改变高度
        $(".layui-table-header  tr").resize(function () {
          $(".layui-table-header  tr").each(function (index, val) {
            $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
          });
        });
        //初始化高度，使得冻结行表头高度一致
        $(".layui-table-header  tr").each(function (index, val) {
          $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
        });

//表体部分
        //动态监听表体高度变化，冻结行跟着改变高度
        $(".layui-table-body  tr").resize(function () {
          $(".layui-table-body  tr").each(function (index, val) {
            $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
          });
        });
        //初始化高度，使得冻结行表体高度一致
        $(".layui-table-body  tr").each(function (index, val) {
          $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
        });
      }
```

结果

![请输入图片描述](https://uploads.cdn.11dz.cn/funAssessment/img/3ce09428-2436-453f-ae42-86b582b2a967.png)

> 最好封装个函数,重载表格的时候会乱 , 例如监听排序 搜索 此处tableFixedRendering就是上面封装起来的函数

```js
// 监听排序
        table.on('sort(currentTableFilter)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象
            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                ,done:function(res){
                    tableFixedRendering();
                }
            });

// layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
        });
```

```js
// 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            /* layer.alert(result, {
                title: '最终的搜索信息'
            }); */

//执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                },done:function(res){
                    tableFixedRendering();
                }

}, 'data');

return false;
        });
```

> ###### 拓展

> Layer数据表格监听排序切换   `https://blog.csdn.net/qq_36025814/article/details/111479021`

最后修改：2021 年 11 月 08 日