angular - 数据表标题和正文未对齐

Question

我在 Angular 6 项目中使用 jquery 数据表创建了一个数据表。在我的情况下，用户可以使用弹出窗口中的表单来切换列。

下面是弹出窗口：

当用户选择/取消选择相应的列标题并保存时，我执行以下步骤；

1. 过滤数组以仅获取需要显示的标题
2. 使用销毁数据表

$(".data-table").DataTable().destroy();

3. 使用以下命令重新初始化数据表：

var table = $(".data-table").DataTable({
    dom:
      "<'row'<'#tblnoitfy'>><'row'<'col-sm-4'l><'col-sm-8'p>>" +
      "<'row'<'col-sm-12'tr>>",
    fixedHeader: {
      header: true,
      footer: true
    },
    scrollY: "calc(100vh - 154px)",
    paging: false,
    scrollX: true,
    scrollCollapse: true,
    searching: false,
    bDestroy: true,
    bAutoWidth: true,
    bDeferRender: true,
    info: false,
    aaSorting: [],
    language: {
      emptyTable: " "
    }
  });

  $(".dataTables_empty").append(this.noDataHtml());
});

一旦我这样做了，我所有的标题和它的数据都会错位。当我们水平滚动数据表时，效果是可见的。

我该如何解决这个问题。！

标签： angulardatatables