0

我正在使用 ngx 数据表。在那个我没有列。默认情况下，它使用默认值，并且它不仅仅是带有滚动条的网格。我尝试使用具有宽度的列数组。

  displayColumns = [
    { name: 'S.No', value: 'SNo', width: '10' }, { name: 'Item', value: 'ProductName' , width: '10'  },
    { name: 'HSN Code', value: 'HCNCode', width: '10'  }, { name: 'GST%', value: 'GSTRate', width: '100'  },
    { name: 'Touch', value: 'PTouch', width: '10'  },
    { name: 'Qty', value: 'Quantity', width: '10'  }, { name: 'MCP Rate', value: 'MCPRate', width: '10'  }, 
    { name: 'MCP Amt', value: 'MCPAmount', width: '10'  },
    { name: 'Weight', value: 'Weight', width: '10'  }, { name: 'MCG Rate', value: 'MCGRate', width: '10'  },
     { name: 'MCG Amt', value: 'MCGAmount', width: '10'  },
    { name: 'Wastage', value: 'STouch', width: '10'  }, { name: 'Purity', value: 'Purity', width: '10'  }, { name: 'Total MC', value: 'TotalMC', width: '10'  },
    { name: 'Gram Rate', value: 'Rate', width: '10'  }, { name: 'Total Amt', value: 'TotalAmount' , width: '10' },
    { name: 'Actions', value: 'Actions' }];

我的桌子是

   <ngx-datatable class="bootstrap" [rows]="roleList" [headerHeight]="80"
                                        [footerHeight]="50" [rowHeight]="'45'" [scrollbarH]="true"
                                        [columnMode]="'force'" [limit]="limit" [loadingIndicator]="loadingIndicator"
                                        [columns]="displayColumns" [reorderable]="reorderable">
                                        <ngx-datatable-column *ngFor="let column of displayColumns"
                                            [name]="column.name">
                                            <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex"
                                                let-value="value" let-row="row">
                                                <span class="badge fw-default"
                                                    [ngClass]="{'badge-success': row[column.value] === 'Yes', 'badge-danger': row[column.value] === 'No' }"
                                                    *ngIf="column.name !== 'Actions'">{{row[column.value]}}</span>
                                                <span *ngIf="column.name === 'Actions'">
                                                    <button class="btn btn-primary mr-1 btn-fab" placement="top"
                                                        ngbTooltip="Edit" [disabled]=financedisabled
                                                        (click)="edit(row)">
                                                        <i class="ft-edit"></i>
                                                    </button>
                                                    <button class="btn btn-warning mr-1 btn-fab" placement="top"
                                                        ngbTooltip="Delete" [disabled]=financedisabled
                                                        (click)="deleteRow(row)">
                                                        <i class="ft-trash-2"></i>
                                                    </button>
                                                    <button class="btn btn-success mr-1 btn-fab" placement="top"
                                                        ngbTooltip="Permission" [disabled]=financedisabled
                                                        (click)="routeToRolePermission(row)">
                                                        <i class="ft-edit"></i>
                                                    </button>
                                                </span>
                                            </ng-template>
                                        </ngx-datatable-column>
                                    </ngx-datatable>

宽度不采用列数组中指定的值。我得到像下面这样的网格 实际上是这样的网格

并期待网格像波纹管 期待网格

如图所示，期望网格带有可拖动的山墙标题..所以你能说一下如何在这种情况下修复列宽。我尝试了很多方法都无法解决它。

4

1 回答 1

-1

如果我正确理解您的问题，您想为列设置固定宽度。我会这样做：

<ngx-datatable-column *ngFor="let column of displayColumns" [name]="column.name" [width]="100">
<!-- the rest of your code -->
</ngx-datatable-column>
于 2020-11-02T09:41:59.053 回答