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

1,653 阅读1分钟

大家可能遇到过这种情况,表格的固定列高度和表格不一样
原因:表头或者标题数据换行,导致高度不一致
在这里插入图片描述
解决:在表格的done 回调中

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());
        });
      }

结果:
在这里插入图片描述