3

我正在尝试使用 ngx-datatable 包在我的 Angular 4 应用程序中显示一些数据，我对设置列宽的“强制”模式特别感兴趣。据我了解，该模式应该根据单元格内容智能地确定列宽，以便所有内容都可见。但是，它对我不起作用。这些列的宽度设置为 150 像素，而不是它们各自的自定义宽度。

这是我的表格 HTML：

<ngx-datatable
  [rows]="rows"
  [columns]="columns"
  [columnMode]="'force'"
  [scrollbarV]="true"
  [scrollbarH]="true"
  [rowHeight]="50"
  >
</ngx-datatable>

这是我的配置：

rows = [
    { displayName: 'Austin', emailAddress: 'a@a.aa', role: 'Swimlane',
      a: 'This should all be visible and none of this should be cut off because the table is in force mode and it should keep it all visible' },
    { displayName: 'Dany', emailAddress: 'b@b.bb', role: 'KFC' , a:'b',
      b:'This text should also be completely visible due to the selected display mode of "force"'},
    { displayName: 'Molly', emailAddress: 'c@c.cc', role: 'Burger King', a:'test', b: '3',
      c: 'Aaaaaaaaaabbbbbbbbbbbbbbbbcccccccccccccccccccccc' },
  ];

columns = [
  { name: 'Name', prop: 'displayName' },
  { name: 'Email', prop: 'emailAddress' },
  { name: 'Role', prop: 'role'},
  { name: 'A', prop: 'a'},
  { name: 'B', prop: 'b'},
  { name: 'C', prop: 'c'}
];

Plunker 在这里显示问题： https ://plnkr.co/edit/KZHb2s0PPAiB7uPtwdIA?p=preview

4

1 回答 1

3

从我过去对 ngx-datatable 的理解和使用来看，强制模式并没有真正按预期工作。一种解决方法是您需要[rowHeight]="'auto'"在表格中添加 HTML。这将使段落显示在多行中，正如您在编辑后的 ​​plunkr: 的屏幕截图中所见 在此处输入图像描述。[scrollbarV]="true"但是，我发现如果还存在上述内容，则添加上述内容将不起作用。

所以基本上，你的数据表 html 应该是这样的：

<ngx-datatable
    [rows]="rows"
    [columns]="columns"
    [columnMode]="'force'"
    [rowHeight]="'auto'"
    [scrollbarH]="true"
    >
</ngx-datatable>

您还可以通过添加width:'300'到列数组中的列对象来手动设置所需列的宽度。

于 2017-11-10T14:35:27.943 回答