Skip to content

Commit 211a0f0

Browse files
igauchigauch
committed
feat: table supports the use of attributes
1 parent 6c6266b commit 211a0f0

7 files changed

+109
-23
lines changed

Diff for: ‎src/table/table-cell.directive.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const bem = buildBem('aui-table');
88
/** Cell template container that adds the right classes and role. */
99
@Directive({
1010
// eslint-disable-next-line @angular-eslint/directive-selector
11-
selector: 'aui-table-cell',
11+
selector: 'aui-table-cell,[aui-table-cell]',
1212
host: {
1313
class: 'aui-table__cell',
1414
role: 'gridcell',

Diff for: ‎src/table/table-header-cell.directive.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const bem = buildBem('aui-table');
88
/** Header cell template container that adds the right classes and role. */
99
@Directive({
1010
// eslint-disable-next-line @angular-eslint/directive-selector
11-
selector: 'aui-table-header-cell',
11+
selector: 'aui-table-header-cell,[aui-table-header-cell]',
1212
host: {
1313
class: 'aui-table__header-cell',
1414
role: 'columnheader',

Diff for: ‎src/table/table-header-row.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77

88
/** Header template container that contains the cell outlet. Adds the right class and role. */
99
@Component({
10-
selector: 'aui-table-header-row',
10+
selector: 'aui-table-header-row,[aui-table-header-row]',
1111
template: CDK_ROW_TEMPLATE,
1212
host: {
1313
class: 'aui-table__header-row',

Diff for: ‎src/table/table-row.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111

1212
/** Data row template container that contains the cell outlet. Adds the right class and role. */
1313
@Component({
14-
selector: 'aui-table-row',
14+
selector: 'aui-table-row,[aui-table-row]',
1515
template: CDK_ROW_TEMPLATE,
1616
host: {
1717
class: 'aui-table__row',

Diff for: ‎src/table/table.component.scss

+64
Original file line numberDiff line numberDiff line change
@@ -135,3 +135,67 @@
135135
}
136136
}
137137
}
138+
139+
// 作为table组件，使用原生table是常见的，所以提供内置的样式适配
140+
table.aui-table {
141+
display: table;
142+
width: 100%;
143+
border-spacing: 0;
144+
145+
.aui-table {
146+
&__row,
147+
&__header-row {
148+
display: table-row;
149+
}
150+
151+
&__cell,
152+
&__header-cell {
153+
display: table-cell;
154+
}
155+
156+
&__cell {
157+
border-bottom-width: 1px;
158+
border-bottom-style: solid;
159+
border-color: use-rgb(n-8);
160+
}
161+
}
162+
163+
tbody {
164+
tr:first-child td {
165+
border-top-width: 1px;
166+
border-top-style: solid;
167+
168+
&:first-child {
169+
border-top-left-radius: use-var(border-radius-l);
170+
}
171+
172+
&:last-child {
173+
border-top-right-radius: use-var(border-radius-l);
174+
}
175+
}
176+
177+
tr td:first-child {
178+
border-left-width: 1px;
179+
border-left-style: solid;
180+
}
181+
182+
tr td:last-child {
183+
border-right-width: 1px;
184+
border-right-style: solid;
185+
}
186+
187+
tr:last-child td {
188+
&:first-child {
189+
border-bottom-left-radius: use-var(border-radius-l);
190+
}
191+
192+
&:last-child {
193+
border-bottom-right-radius: use-var(border-radius-l);
194+
}
195+
}
196+
}
197+
198+
[rowspan='0'] {
199+
display: none;
200+
}
201+
}

Diff for: ‎src/table/table.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
} from './table-placeholder.directive';
2727

2828
@Component({
29-
selector: 'aui-table',
29+
selector: 'aui-table,[aui-table]',
3030
exportAs: 'auiTable',
3131
encapsulation: ViewEncapsulation.None,
3232
styleUrls: ['table.component.scss', 'table-scroll.scss'],

Diff for: ‎stories/table/table.stories.mdx

+40-18
Original file line numberDiff line numberDiff line change
@@ -54,44 +54,66 @@ Table 组件基于 CdkTable 开发, 加了一些 alauda 自定义的表格样式
5454
>
5555
{{
5656
template: /* HTML */ `
57-
<aui-table [dataSource]="dataSource">
57+
<table
58+
aui-table
59+
[dataSource]="dataSource"
60+
>
5861
<ng-container auiTableColumnDef="id">
59-
<aui-table-header-cell *auiTableHeaderCellDef>
62+
<th
63+
aui-table-header-cell
64+
*auiTableHeaderCellDef
65+
>
6066
No.
61-
</aui-table-header-cell>
62-
<aui-table-cell *auiTableCellDef="let item">
67+
</th>
68+
<td
69+
aui-table-cell
70+
*auiTableCellDef="let item"
71+
[attr.rowspan]="item.id === 1 ? 2 : item.id === 2 ? 0 : 1"
72+
>
6373
<div>{{ item.id }}</div>
64-
</aui-table-cell>
74+
</td>
6575
</ng-container>
6676
<ng-container auiTableColumnDef="name">
67-
<aui-table-header-cell *auiTableHeaderCellDef>
77+
<th
78+
aui-table-header-cell
79+
*auiTableHeaderCellDef
80+
>
6881
Name
69-
</aui-table-header-cell>
70-
<aui-table-cell
82+
</th>
83+
<td
84+
aui-table-cell
7185
*auiTableCellDef="let item"
7286
direction="column"
7387
>
7488
{{ item.name }}
7589
<div style="font-size: 12px;color: #96989b;line-height: 16px;">
7690
{{ item.displayName }}
7791
</div>
78-
</aui-table-cell>
92+
</td>
7993
</ng-container>
8094
<ng-container auiTableColumnDef="value">
81-
<aui-table-header-cell *auiTableHeaderCellDef>
95+
<th
96+
aui-table-header-cell
97+
*auiTableHeaderCellDef
98+
>
8299
Value
83-
</aui-table-header-cell>
84-
<aui-table-cell *auiTableCellDef="let item">
100+
</th>
101+
<td
102+
aui-table-cell
103+
*auiTableCellDef="let item"
104+
>
85105
{{ item.value }}
86-
</aui-table-cell>
106+
</td>
87107
</ng-container>
88-
<aui-table-header-row
108+
<tr
109+
aui-table-header-row
89110
*auiTableHeaderRowDef="['id', 'name', 'value']; sticky: sticky"
90-
></aui-table-header-row>
91-
<aui-table-row
111+
></tr>
112+
<tr
113+
aui-table-row
92114
*auiTableRowDef="let row; columns: ['id', 'name', 'value'];"
93-
></aui-table-row>
94-
</aui-table>
115+
></tr>
116+
</table>
95117
`,
96118
props: {
97119
dataSource: DATA_SOURCE,

0 commit comments

Comments
 (0)