DevExtreme dx-datagrid加载时如何移除默认加载遮罩层

dx-datagrid加载数据时弹出的半透明遮罩是组件内置的loadPanel模块控制的，直接修改对应配置即可关闭，不需要额外操作DOM或者强行覆盖样式。

方法一：永久关闭所有场景下的加载遮罩 #

初始化组件时直接配置loadPanel.enabled为false，首次加载、分页/筛选/排序触发的二次加载都不会再弹出遮罩：

• jQuery写法示例：

$("#yourGridContainer").dxDataGrid({
  dataSource: yourDataSource,
  // 其余业务配置（列、分页、筛选等）
  loadPanel: {
    enabled: false
  }
})

• Angular写法示例：

<dx-data-grid
  [dataSource]="yourDataSource"
  [loadPanel]="{ enabled: false }"
>
  <!-- 列配置、工具栏配置等内容 -->
</dx-data-grid>

React、Vue框架下的写法逻辑完全一致，给组件传入loadPanel配置项将enabled设为false即可。

方法二：仅首次加载隐藏遮罩，后续操作保留 #

如果只需要去掉页面首次进入加载表格的遮罩，后续分页、筛选时还是需要默认加载提示，可以在首次内容渲染完成的回调里动态开启loadPanel：

$("#yourGridContainer").dxDataGrid({
  dataSource: yourDataSource,
  loadPanel: {
    enabled: false // 初始状态关闭
  },
  onContentReady: function(e) {
    if (!e.component.__firstLoaded) {
      e.component.__firstLoaded = true;
      // 首次加载完成后重新开启加载面板
      e.component.option("loadPanel.enabled", true);
    }
  }
})

方法三：保留加载状态、仅移除半透明遮罩层 #

如果不想丢失加载状态提示，只是觉得整块遮罩遮挡内容太突兀，可以不关闭loadPanel，通过CSS覆盖把遮罩背景设为透明，只保留加载动画：

/* 移除遮罩半透明背景和边框阴影 */
.dx-datagrid .dx-loadpanel-content .dx-overlay-content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.dx-datagrid .dx-loadpanel-wrapper {
  background: transparent !important;
}

默认遮罩效果参考：

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