关于 html：如何以angular设置 mat-table 列的宽度？
How to set width of mat-table column in angular?
在我的 mat-table 中有 6 列，当任何一列没有更多单词时，它看起来像 Image-1，但是当任何列有更多单词时，UI 看起来像 Image-2，所以如何设置 UI 像 Image- 1 当任何列在angular 6 中有更多单词时？
图像-1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
< table mat-table [dataSource ]="dataSource">
<ng-container matColumnDef ="userimage">
<th mat-header-cell *matHeaderCellDef > # </th >
<td mat-cell *matCellDef ="let element">
<img src ="{{commonUrlObj.commonUrl}}/images/{{element.userimage}}" style ="height: 40px;width: 40px;"/ >
</td >
</ng-container >
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> Full Name </th>
<td mat-cell *matCellDef="let element"> {{element.username}} ( {{element.usertype}} )</td>
</ng-container>
<ng-container matColumnDef="emailid">
<th mat-header-cell *matHeaderCellDef> EmailId </th>
<td mat-cell *matCellDef="let element"> {{element.emailid}} </td>
</ng-container>
<ng-container matColumnDef="contactno">
<th mat-header-cell *matHeaderCellDef> Contact No. </th>
<td mat-cell *matCellDef="let element"> {{element.contactno}} </td>
</ng-container>
<ng-container matColumnDef="enabled">
<th mat-header-cell *matHeaderCellDef> Enabled </th>
<td mat-cell *matCellDef="let element" style="color: blue">
<ng-container *ngIf="element.enabled == ‘true’; else otherss">Enabled</ng-container>
<ng-template #otherss>Disabled</ng-template>
</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let element" fxLayoutGap="5px">
<button mat-mini-fab color="primary" routerLink="/base/editUserDetails/{{element.userid}}"><mat-icon>edit</mat-icon></button>
<button mat-mini-fab color="primary" routerLink="/base/viewUserDetails/{{element.userid}}"><mat-icon>pageview</mat-icon></button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50 ,100]" showFirstLastButtons></mat-paginator> |
使用 css 我们可以调整我在下面的代码中输入的特定列宽。
user.component.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
table{
width: 100%;
}
.mat-column-username {
word-wrap: break-word !important;
white-space: unset !important;
flex: 0 0 28% !important;
width: 28% !important;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.mat-column-emailid {
word-wrap: break-word !important;
white-space: unset !important;
flex: 0 0 25% !important;
width: 25% !important;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.mat-column-contactno {
word-wrap: break-word !important;
white-space: unset !important;
flex: 0 0 17% !important;
width: 17% !important;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.mat-column-userimage {
word-wrap: break-word !important;
white-space: unset !important;
flex: 0 0 8% !important;
width: 8% !important;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.mat-column-userActivity {
word-wrap: break-word !important;
white-space: unset !important;
flex: 0 0 10% !important;
width: 10% !important;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
} |
- 您应该添加将这些类添加到哪个选择器
- @Nick：您不会添加到数据表的任何选择器中。只需将您的 css 选择器命名为与您在 .html 文件中给 matColumnDef 的名称相同
- @BashirM.Saad 谢谢，这让事情变得更容易，特别是选择器是预定义的，无需添加自定义选择器。它的工作原理完全如图所示。
- 为什么是 !important ？尽可能避免使用此指令，因为没有它可以正常工作。
如果您在样式中使用 scss，则可以使用 mixin 来帮助生成代码。如果你每次都把所有的属性都放好，你的风格很快就会失控。
这是一个非常简单的示例——实际上只是一个概念证明，您可以根据需要使用多个属性和规则对其进行扩展。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
@mixin mat-table-columns($columns)
{
.mat-column-
{
@each $colName, $props in $columns {
$width: map-get($props, ‘width’);
&#{$colName}
{
flex: $width;
min-width: $width;
@if map-has-key($props, ‘color’)
{
color: map-get($props, ‘color’);
}
}
}
}
}
|
然后在定义表格的组件中执行以下操作：
|
1
2
3
4
5
6
7
|
@include mat-table-columns((
orderid: (width: 6rem, color: gray),
date: (width: 9rem),
items: (width: 20rem)
));
|
这会生成如下内容：
|
1
2
3
4
5
6
7
8
|
.mat-column-orderid[_ngcontent-c15] {
flex: 6rem;
min-width: 6rem;
color: gray; }
.mat-column-date[_ngcontent-c15] {
flex: 9rem;
min-width: 9rem; }
|
在此版本中，width 变为 flex: value; min-width: value。
对于您的具体示例，您可以添加 wrap: true 或类似的东西作为新参数。
-
大约是时候有人为此投票给我了 :-) 我发现这种方式非常有帮助 – 您可以根据需要随意扩展它，以使组件之间更加一致。
-
注意：如果您愿意，当然可以使用像素。当涉及文本数据时，我通常更喜欢 ems，并且我在这里使用 rems，因为当标题和单元格字体大小不同时，它们会出现偏差，因为根据定义，//’em//’ 会因字体大小而异。
-
这看起来超级漂亮，但我不清楚将mixin放在哪里……
-
如何在 mat-table 中导入 $columns ？
-
@SridharNatuva 你不导入 $columns，那只是定义的 mixin 中的一个变量名(查找 sass mixin)。当您将 mixin 与 @include 一起使用时，您将 $columns 的值放在其中(在我上面的示例 @include mat-table-columns(( 中，第二个括号是 $columns 的值的开头，它是代表每个命名列的 sass 数据结构)
正如我已经实施的那样，它运行良好。您只需要使用 matColumnDef=”description”
添加列宽
例如：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<mat-table #table [dataSource]="dataSource" matSortDisableClear>
<ng-container matColumnDef="productId">
<mat-header-cell *matHeaderCellDef>product ID</mat-header-cell>
<mat-cell *matCellDef="let product">{{product.id}}</mat-cell>
</ng-container>
<ng-container matColumnDef="productName">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let product">{{product.name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
<mat-cell *matCellDef="let product">
<button (click)="view(product)">
<mat-icon>visibility</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
|
这里 matColumnDef 是
productId、productName 和 action
现在我们通过 matColumnDef
应用宽度
造型
|
1
2
3
4
5
6
|
.mat-column-productId {
flex: 0 0 10%;
}
.mat-column-productName {
flex: 0 0 50%;
}
|
剩余的宽度平均分配给其他列
-
我认为这是最好的答案。这真的帮助了我。寻找解决方案一段时间。谢谢！
-
它可以工作，只要确保你适当地命名你的 css 类，例如 .mat-column-xxx 其中 xxx 可以是任何东西
你可以很容易地做到这一点。在每一列中，您将获得一个字段名称以 mat-column 为前缀的类，因此该类将类似于 mat-column-yourFieldName。因此，您可以设置如下样式
|
1
2
3
4
|
.mat-column-yourFieldName {
flex: none;
width: 100px;
}
|
所以我们可以根据我们的要求给列固定宽度。
希望这对某人有所帮助。
-
它对我有用，谢谢。如果我想避免为每个列重复 flex: none; 怎么办？假设我尝试了一个类 .mat-column-* { flex: none; } 但它不起作用。
你可以使用下面的 CSS 来做到这一点：
|
1
2
3
4
5
6
7
8
9
10
11
|
table {
width: 100%;
table-layout: fixed;
}
th, td {
overflow: hidden;
width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
} |
这是一个带有示例数据
的StackBlitz Example
- 它是关于 mat-table 而不是 table[mat-table]。这不适用于 mat-table (flex)。 material.angular.io/components/table/overview
-
不确定他们是否说这不适用于 mat-table，我有一个 mat-table，设置此代码并完美运行。
这是解决问题的另一种方法：
与其尝试”在帖子中修复它”，为什么不在表格需要尝试将其放入其列之前截断描述？我是这样做的：
|
1
2
3
4
5
6
|
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef> {{ ‘Parts.description’ | translate }} </th>
<td mat-cell *matCellDef="let element">
{{(element.description.length > 80) ? ((element.description).slice(0, 80) + ‘…’) : element.description}}
</td>
</ng-container>
|
所以我首先检查数组是否大于某个长度，如果是，则截断并添加 //’…//’ 否则按原样传递值。这使我们仍然可以从表格的自动间距中受益 :)
-
对我来说最好的解决方案，因为我也想截断数据。在其他解决方案中，如果您只提供列的宽度，则行高会随着数据增长超出宽度而扩大
我们可以直接将属性宽度添加到th
例如：
|
1
2
3
4
|
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef width ="20%"> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
|
-
到目前为止，不推荐在 TH 标签上使用宽度。
-
只是为了添加到书面记录中，官方文档确认了这一点：<th>
在此处输入图像描述我有一个有四列的表格。请看截图。在 scss 文件中，我包含以下代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.full-width-table {
width: 100%;
}
.mat-column-id {
width: 15% !important;
}
.mat-column-question {
width: 55% !important;
}
.mat-column-view {
width: 15% !important;
}
.mat-column-reply {
width: 15% !important;
}
|
-
这是一个答案吗？
-
这对我有用。您可以查看附件图片
-
这应该被标记为答案——不知道为什么它没有得到支持。
-
@AlanObject 因为你不应该在样式中使用 !important，这是一个不好的做法
-
@DilyanDimitrov !important 除了样式之外在哪里使用？
只需要更新th标签的宽度即可。
如果您想为特定列提供固定宽度，您可以将 fxFlex=”60px” 同时添加到 mat-cell 和 mat-header-cell。
您可以使用 fixedLayout=”true” 属性，例如 <table #table mat-table [dataSource]=”dataSource” fixedLayout=”true”>
fixedLayout : 是否使用固定的表格布局。启用此选项将强制使用一致的列宽并优化本机表的呈现粘性样式。弹性表的无操作。
只需将 style=”width:5% !important;” 添加到 th 和 td
|
1
2
3
4
|
<ng-container matColumnDef="username">
<th style="width:5% !important;" mat-header-cell *matHeaderCellDef> Full Name </th>
<td style="width:5% !important;" mat-cell *matCellDef="let element"> {{element.username}} ( {{element.usertype}} )</td>
</ng-container>
|
只需在标签表中添加类 full-width-table。
例如
<table mat-table class=”full-width-table” [dataSource]=”dataSource”>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269165.html
