Teradata 共价数据表行溢出答案

【问题标题】：Teradata covalent datatable row overflowTeradata 共价数据表行溢出
【发布时间】：2018-03-23 19:06:07
【问题描述】：

我正在编写 Angular 5 应用程序并且我正在使用 Teradata 组件，但我在使用 DataTable 时遇到问题。

这是我的桌子的图片：

我想在一行末尾加上“...”的描述列，但是设置 td-data-table-cell 不起作用。

.td-data-table-cell {
    text-overflow: ellipsis;
}

有人知道如何解决这个问题吗？

解决方案：

好的，所以我找到了解决方案，也许它会对某人有所帮助

  <td-data-table
    #dataTable
    [data]="filteredData"
    [columns]="columns"
    [selectable]="true"
    [clickable]="true"
    [multiple]="true"
    [sortable]="true"
    [sortBy]="sortBy"
    [(ngModel)]="selectedRows"
    [sortOrder]="sortOrder"
    (sortChange)="sort($event)"
    (rowClick)="showAlert($event)"
    [style.height.px]="560"
    [style.minheight.px]="100">
      <ng-template tdDataTableTemplate="description" let-value="value" let-row="row" let-column="column">
        <p matTooltip="{{ row[column ]}}">{{ row[column] }}</p>
      </ng-template>
      <ng-template tdDataTableTemplate="vendorName" let-value="value">
        <p matTooltip="{{ value }}">{{ value }}</p>
      </ng-template>
      <ng-template tdDataTableTemplate="buttons" let-value="value">
        <button mat-button color="primary" color="primary" >text</button>
      </ng-template>
  </td-data-table>

使用 ng-template 您可以设置特定列的样式。

和

的 css

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

【问题讨论】：

标签： html css angular datatable teradata

【解决方案1】：

当您必须操作共价组件 css 类的样式时（我相信它也适用于有角材料），您需要在类名之前添加 /deep/ 关键字。这样它就不会忽略您正在设置的样式。像这样

/deep/ .td-data-table-cell { 文本溢出：省略号； }

如果它在 /deep/ 上显示错误，只需忽略它并运行它。它会运行得很好。

【讨论】：