fix(module:table): fix table colSpan and rowSpan property

close NG-ZORRO#5509
vthinkxie · Jul 9, 2020 · a5b4120 · a5b4120
1 parent 13875cb
commit a5b4120
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 14 deletions.
diff --git 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<boolean>` | - |
-| `[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
@@ -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
@@ -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<void>();
   isAutoLeft = false;
   isAutoRight = false;

diff --git 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
@@ -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
@@ -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`);
             }