解决layui表格单元格内容换行时设置了fixed的列错位的问题。

原创于 2025-03-31 17:25:47 发布 · 392 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端 #javascript

问题因为单元格高度被内容撑开，导致fixed的列错位

解决方法

我这是给单元格设置了文本换行展示高度自动

.layui-table-cell {
        height: auto;
        overflow: visible;
        text-overflow: inherit;
        white-space: normal;
        word-break: break-all;
    }

在表格的done回调里调用函数

done: function (res, curr, count) {

                    admin.adjustTableHeight("w_pyy_mmi_table")

                },

js部分函数

 // 解决表格单元格换行表格错位的方法 2025/03/31 LY

    admin.adjustTableHeight = function (tableId) {

        // 安全处理选择器

        const escapedId = CSS.escape(tableId);

        const $mainTable = $(`#${escapedId}+.layui-table-view`);

        // 错误边界处理

        if (!$mainTable.length) return;

        // 预缓存固定列行集合

        const $fixedRows = $mainTable.find('.layui-table-fixed-r .layui-table-body tr');

        // 同步行高

        $mainTable.find('.layui-table-main tr').each(function (index) {

            const $targetRow = $fixedRows.eq(index);

            if ($targetRow.length) {

                $targetRow

                    .css('visibility', 'visible')

                    .outerHeight($(this).outerHeight());

            }

        });

        // 同步表头高度

        const $mainHeader = $mainTable.find('.layui-table-header:first');

        const headerHeight = $mainHeader.outerHeight();

        const $fixedHeader = $mainTable.find('.layui-table-fixed .layui-table-header');

        $fixedHeader.outerHeight(headerHeight);

        $fixedHeader.find('th').outerHeight(headerHeight);

    }

最后效果