diff --git a/components/table/doc/index.en-US.md b/components/table/doc/index.en-US.md index a11a8b2655f..d7841d2bcd0 100644 --- a/components/table/doc/index.en-US.md +++ b/components/table/doc/index.en-US.md @@ -168,8 +168,8 @@ Checkbox property | `[nzIndeterminate]` | Indeterminate status | `boolean` | - | | `[nzChecked]` | Checked status, double binding | `boolean` | - | | `(nzCheckedChange)` | Checked status change callback | `EventEmitter` | - | -| `[colspan]` | how many columns the cell extends | `number` | `null` | -| `[rowspan]` | how many rows the cell extends | `number` | `null` | +| `[colSpan]` | how many columns the cell extends | `number` | `null` | +| `[rowSpan]` | how many rows the cell extends | `number` | `null` | Expand property diff --git a/components/table/doc/index.zh-CN.md b/components/table/doc/index.zh-CN.md index bf14e236ea1..1d9b562423f 100644 --- a/components/table/doc/index.zh-CN.md +++ b/components/table/doc/index.zh-CN.md @@ -146,8 +146,8 @@ Table 组件同时具备了易用性和高度可定制性 | `[nzAlign]` | 设置列内容的对齐方式 | `'left' \| 'right' \| 'center'` | - | | `[nzBreakWord]` | 是否折行显示 | `boolean` | `false` | | `[nzEllipsis]` | 超过宽度将自动省略,暂不支持和排序筛选一起使用。仅当表格布局将为 `nzTableLayout="fixed"`时可用 | `boolean` | `false` | -| `[colspan]` | 每单元格中扩展列的数量 | `number` | `null` | -| `[rowspan]` | 每单元格中扩展行的数量 | `number` | `null` | +| `[colSpan]` | 每单元格中扩展列的数量 | `number` | `null` | +| `[rowSpan]` | 每单元格中扩展行的数量 | `number` | `null` | 其他 diff --git a/components/table/src/cell/cell-fixed.directive.ts b/components/table/src/cell/cell-fixed.directive.ts index d0f785ad16c..66c058f3c8e 100644 --- a/components/table/src/cell/cell-fixed.directive.ts +++ b/components/table/src/cell/cell-fixed.directive.ts @@ -18,6 +18,7 @@ export class NzCellFixedDirective implements OnChanges { @Input() nzRight: string | boolean = false; @Input() nzLeft: string | boolean = false; @Input() colspan: number | null = null; + @Input() colSpan: number | null = null; changes$ = new Subject(); isAutoLeft = false; isAutoRight = false; diff --git a/components/table/src/cell/th-measure.directive.ts b/components/table/src/cell/th-measure.directive.ts index 6dd1ace0b0e..cca3932ab43 100644 --- a/components/table/src/cell/th-measure.directive.ts +++ b/components/table/src/cell/th-measure.directive.ts @@ -13,20 +13,24 @@ export class NzThMeasureDirective implements OnChanges { changes$ = new Subject(); @Input() nzWidth: string | null = null; @Input() colspan: string | number | null = null; + @Input() colSpan: string | number | null = null; @Input() rowspan: string | number | null = null; + @Input() rowSpan: string | number | null = null; constructor(private renderer: Renderer2, private elementRef: ElementRef) {} ngOnChanges(changes: SimpleChanges): void { - const { nzWidth, colspan, rowspan } = changes; - if (colspan) { - if (!isNil(this.colspan)) { - this.renderer.setAttribute(this.elementRef.nativeElement, 'colspan', `${this.colspan}`); + const { nzWidth, colspan, rowspan, colSpan, rowSpan } = changes; + if (colspan || colSpan) { + const col = this.colspan || this.colSpan; + if (!isNil(col)) { + this.renderer.setAttribute(this.elementRef.nativeElement, 'colspan', `${col}`); } else { this.renderer.removeAttribute(this.elementRef.nativeElement, 'colspan'); } } - if (rowspan) { - if (!isNil(this.rowspan)) { - this.renderer.setAttribute(this.elementRef.nativeElement, 'rowspan', `${this.rowspan}`); + if (rowspan || rowSpan) { + const row = this.rowspan || this.rowSpan; + if (!isNil(row)) { + this.renderer.setAttribute(this.elementRef.nativeElement, 'rowspan', `${row}`); } else { this.renderer.removeAttribute(this.elementRef.nativeElement, 'rowspan'); } diff --git a/components/table/src/table-style.service.ts b/components/table/src/table-style.service.ts index 7b08ebcea94..46e60926949 100644 --- a/components/table/src/table-style.service.ts +++ b/components/table/src/table-style.service.ts @@ -67,7 +67,7 @@ export class NzTableStyleService { setListOfTh(listOfTh: NzThMeasureDirective[]): void { let columnCount = 0; listOfTh.forEach(th => { - columnCount += (th.colspan && +th.colspan) || 1; + columnCount += (th.colspan && +th.colspan) || (th.colSpan && +th.colSpan) || 1; }); const listOfThPx = listOfTh.map(item => item.nzWidth); this.columnCount$.next(columnCount); @@ -77,7 +77,7 @@ export class NzTableStyleService { setListOfMeasureColumn(listOfTh: NzThMeasureDirective[]): void { const listOfKeys: string[] = []; listOfTh.forEach(th => { - const length = (th.colspan && +th.colspan) || 1; + const length = (th.colspan && +th.colspan) || (th.colSpan && +th.colSpan) || 1; for (let i = 0; i < length; i++) { listOfKeys.push(`measure_key_${i}`); } diff --git a/components/table/src/table/tr.directive.ts b/components/table/src/table/tr.directive.ts index a6acdfaba67..47bb4b42333 100644 --- a/components/table/src/table/tr.directive.ts +++ b/components/table/src/table/tr.directive.ts @@ -63,7 +63,7 @@ export class NzTrDirective implements AfterContentInit, OnDestroy { listOfLeftCell.forEach((cell, index) => { if (cell.isAutoLeft) { const currentArray = listOfLeftCell.slice(0, index); - const count = currentArray.reduce((pre, cur) => pre + (cur.colspan || 1), 0); + const count = currentArray.reduce((pre, cur) => pre + (cur.colspan || cur.colSpan || 1), 0); const width = listOfAutoWidth.slice(0, count).reduce((pre, cur) => pre + cur, 0); cell.setAutoLeftWidth(`${width}px`); }