Tabulator表格指定列模糊遮罩同步适配列宽与分页问题求助

1. 调整遮罩基础样式 #

首先确保遮罩的定位逻辑正确，避免滚动或拖动时错位：

#overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.6); /* 半透明模糊遮罩效果 */
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    pointer-events: none; /* 不遮挡表格原生交互（如列拖动、分页） */
    z-index: 10;
}

.tabulator-tableholder {
    position: relative; /* 让遮罩相对于表格内容容器定位 */
}

2. 优化遮罩定位函数 #

替换原positionOverlay函数，改用Tabulator原生API获取列信息，避免依赖单元格元素（分页切换后可能无数据单元格）：

function positionOverlay() {
    const overlay = document.getElementById("overlay");
    const tableElement = document.querySelector(".tabulator-tableholder");
    const column = table.getColumn("someColumn");
    
    if (!column) return; // 列不存在时直接返回

    // 获取列容器及表格容器的视口位置
    const columnRect = column.getElement().getBoundingClientRect();
    const tableRect = tableElement.getBoundingClientRect();
    
    // 计算遮罩相对于表格容器的偏移（避免视口滚动导致错位）
    const relativeLeft = columnRect.left - tableRect.left;
    // 动态获取表头高度，替代硬编码的34px
    const headerHeight = column.getHeaderElement().getBoundingClientRect().height;
    // 遮罩高度为表格内容区域高度（排除表头）
    const contentHeight = tableRect.height - headerHeight;

    // 用Tabulator原生API获取列宽，比DOM元素更准确
    overlay.style.width = `${column.getWidth()}px`;
    overlay.style.height = `${contentHeight}px`;
    overlay.style.left = `${relativeLeft}px`;
    overlay.style.top = `${headerHeight}px`;
    overlay.style.display = "flex";
}

3. 实现实时跟随与跨分页保持 #

通过监听原生鼠标事件+Tabulator专属事件，覆盖拖动过程、拖动结束、分页切换全场景：

// 页面初始化时先定位一次遮罩
positionOverlay();

// 列宽调整结束后更新（原逻辑保留）
table.on("columnResized", positionOverlay);

// 列宽拖动过程中实时更新
document.addEventListener("mousemove", () => {
    const tableElement = document.querySelector(".tabulator-tableholder");
    // Tabulator拖动列时会给表格添加.tabulator-col-resizing类
    if (tableElement.classList.contains("tabulator-col-resizing")) {
        positionOverlay();
    }
});

// 分页切换时重新定位遮罩
table.on("pageChanged", positionOverlay);

4. 遮罩添加文字 #

直接在遮罩DOM中插入内容即可，结合CSS的flex布局自动居中：

<div id="overlay">
    <span>该列内容已隐藏</span>
</div>

内容的提问来源于stack exchange，提问作者Beyza