fix(table): fix table header

Tencent · Jan 27, 2022 · a121a0d · a121a0d
1 parent e8bd6ba
commit a121a0d
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 53 deletions.
diff --git a/src/table/base-table/table-header.tsx b/src/table/base-table/table-header.tsx
@@ -4,69 +4,115 @@ import { BaseTableCol, CellData } from '../type';
 import baseTableProps from '../base-table-props';
 import { prefix } from '../../config';
 
+type ThProps = {
+  rowspan: number;
+  colspan: number;
+  column: BaseTableCol;
+  index: number;
+  hasChildren: boolean;
+  isFirstColumn: boolean;
+};
+
 export default defineComponent({
   name: `${prefix}-table-header`,
   components: {
     TableCell,
   },
+
   props: {
     columns: baseTableProps.columns,
     bordered: baseTableProps.bordered,
   },
+
+  data() {
+    return {
+      cacheRowMaxRowspan: [],
+    };
+  },
+
   methods: {
     renderHeader(): Array<VNode> {
-      const trContentList: Array<any> = [];
-      this.renderTr(this.columns, 0, trContentList);
-      const theadContent = trContentList.map((item: any) => <tr>{item}</tr>);
-      return theadContent;
+      const { bordered, cacheRowMaxRowspan } = this;
+      const trPropsList: Array<Array<ThProps>> = [];
+      this.renderTr(this.columns, 0, trPropsList, true);
+      return trPropsList.map((thPropsList, rowindex) => {
+        const currentRowMaxRowspan = cacheRowMaxRowspan[rowindex] || 1;
+        return (
+          <tr>
+            {thPropsList.map(({ column, rowspan, colspan, index, hasChildren, isFirstColumn }) => {
+              const withBorder = bordered && index === 0 && !isFirstColumn;
+              return this.renderCell(column, hasChildren ? rowspan : currentRowMaxRowspan, colspan, index, withBorder);
+            })}
+          </tr>
+        );
+      });
     },
-    renderTr(columns: Array<BaseTableCol>, currentRowIndex: number, trContentList: Array<any>): any {
-      const thContent: Array<VNode> = [];
+    renderTr(
+      columns: Array<BaseTableCol>,
+      currentRowIndex: number,
+      trPropsList: Array<any>,
+      isParentFirstColumn: boolean,
+    ): any {
+      const { cacheRowMaxRowspan } = this;
+      const currentRowThProps: Array<ThProps> = [];
       // 当前行
-      if (typeof trContentList[currentRowIndex] === 'undefined') {
+      if (typeof trPropsList[currentRowIndex] === 'undefined') {
         // eslint-disable-next-line no-param-reassign
-        trContentList[currentRowIndex] = [];
+        trPropsList[currentRowIndex] = [];
       }
-      // 实际占用的列
-      let currentColSpan = 0;
-      columns.forEach((column: BaseTableCol, colIndex: number) => {
+      if (typeof cacheRowMaxRowspan[currentRowIndex] === 'undefined') {
+        cacheRowMaxRowspan[currentRowIndex] = 1;
+      }
+      // 占用的列
+      let colspan = 0;
+      // 占用的行
+      let rowspan = 1;
+      columns.forEach((column: BaseTableCol, index: number) => {
         const { children } = column;
         if (children?.length) {
-          const colSpan = this.renderTr(children, currentRowIndex + 1, trContentList);
-          currentColSpan += colSpan;
-          thContent[colIndex] = this.renderCell(column, 1, colSpan, currentRowIndex, colIndex);
+          const isFirstColumn = isParentFirstColumn && index === 0;
+          const { colspan: occupiedCol, rowspan: occupiedRow } = this.renderTr(
+            children,
+            currentRowIndex + 1,
+            trPropsList,
+            isFirstColumn,
+          );
+          colspan += occupiedCol;
+          rowspan += occupiedRow;
+          cacheRowMaxRowspan[currentRowIndex] = Math.max(rowspan, cacheRowMaxRowspan[currentRowIndex]);
+          currentRowThProps[index] = {
+            rowspan: 1,
+            colspan: occupiedCol,
+            column,
+            index,
+            hasChildren: true,
+            isFirstColumn: index === 0 && isParentFirstColumn,
+          };
         }
       });
-      let rowspan = 1;
-      if (trContentList.length >= 1) {
-        rowspan = trContentList.length - currentRowIndex;
-      }
-      // 普通单元格，也许会涉及跨行
-      columns.forEach((column, colIndex: number) => {
+      // 普通单元格
+      columns.forEach((column, index: number) => {
         const { children } = column;
         if (!children || children?.length === 0) {
-          // 上一行有跨行到当前行且单元格是当前行的第一列，要带上边框。
-          const withBorder =
-            currentRowIndex > 0 &&
-            this.bordered &&
-            thContent.length === 0 &&
-            trContentList[currentRowIndex].length === 0;
-          thContent[colIndex] = this.renderCell(column, rowspan, 1, colIndex, currentRowIndex, withBorder);
-          currentColSpan += 1;
+          currentRowThProps[index] = {
+            rowspan,
+            colspan: 1,
+            column,
+            index,
+            hasChildren: false,
+            isFirstColumn: index === 0 && isParentFirstColumn,
+          };
+          colspan += 1;
         }
       });
-      trContentList[currentRowIndex].push(...thContent);
-      return currentColSpan;
+      trPropsList[currentRowIndex].push(...currentRowThProps);
+      return {
+        colspan,
+        rowspan,
+      };
     },
 
-    renderCell(
-      column: BaseTableCol,
-      rowspan: number,
-      colspan: number,
-      colIndex: number,
-      currentRowIndex: number,
-      withBorder?: boolean,
-    ): VNode {
+    renderCell(column: BaseTableCol, rowspan: number, colspan: number, index: number, withBorder?: boolean): VNode {
       const { title, render } = column;
       const customData = {
         type: 'title',
@@ -94,16 +140,14 @@ export default defineComponent({
 
       const cellData = {
         col: column,
-        colIndex,
+        colIndex: index,
         customData,
         customRender,
         type: 'th',
         withBorder,
       };
 
-      return (
-        <table-cell ref={`${currentRowIndex}_${colIndex}`} cellData={cellData} colspan={colspan} rowspan={rowspan} />
-      );
+      return <table-cell cellData={cellData} colspan={colspan} rowspan={rowspan} />;
     },
   },
   render() {

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -178,7 +178,9 @@ exports[`ssr snapshot test renders ./examples/alert/demos/collapse.vue correctly
         <!---->
       </div>
     </div>
-    <!---->
+    <div class="t-alert__close"><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close" style="">
+        <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fillopacity="0.9"></path>
+      </svg></div>
   </div>
 </div>
 `;
@@ -296,7 +298,9 @@ exports[`ssr snapshot test renders ./examples/alert/demos/operation.vue correctl
         </div>
       </div>
     </div>
-    <!---->
+    <div class="t-alert__close"><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close" style="">
+        <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fillopacity="0.9"></path>
+      </svg></div>
   </div>
 </div>
 `;
@@ -319,7 +323,9 @@ exports[`ssr snapshot test renders ./examples/alert/demos/title.vue correctly 1`
         </div>
       </div>
     </div>
-    <!---->
+    <div class="t-alert__close"><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close" style="">
+        <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fillopacity="0.9"></path>
+      </svg></div>
   </div>
 </div>
 `;
@@ -8559,7 +8565,7 @@ exports[`ssr snapshot test renders ./examples/comment/demos/reply-form.vue corre
           <div class="t-textarea"><textarea style="" class="t-textarea__inner narrow-scrollbar" modelvalue placeholder="请输入内容"></textarea>
             <!---->
             <!---->
-          </div><button class="t-button t-size-m t-button--variant-base t-button--theme-primary" type="button"><span class="t-button__text"><!--[--> 回复 <!--]--></span></button>
+          </div><button class="t-button t-size-m t-button--variant-base t-button--theme-primary form-submit" type="button"><span class="t-button__text"><!--[-->回复<!--]--></span></button>
         </div>
         <!--]-->
       </div>
@@ -36313,7 +36319,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/multi-header.vue corre
               <!--[-->
               <td class="t-align-left t-text-ellipsis test" style="overflow:hidden;" colspan="1" rowspan="2">平台</td>
               <td class="" style="" colspan="3" rowspan="1">类型及默认值</td>
-              <td class="t-align-left t-text-ellipsis test2" style="overflow:hidden;" colspan="1" rowspan="2">属性</td>
+              <td class="t-align-left t-text-ellipsis test2" style="overflow:hidden;border-left:1px solid #E7E7E7;" colspan="1" rowspan="2">属性</td>
               <td class="t-align-left t-text-ellipsis row" style="overflow:hidden;" colspan="1" rowspan="2">说明</td>
               <!--]-->
             </tr>

diff --git a/test/unit/alert/__snapshots__/demo.test.js.snap b/test/unit/alert/__snapshots__/demo.test.js.snap
@@ -407,7 +407,23 @@ exports[`Alert Alert collapseVue demo works fine 1`] = `
         <!---->
       </div>
     </div>
-    <!---->
+    <div
+      class="t-alert__close"
+    >
+      <svg
+        class="t-icon t-icon-close"
+        fill="none"
+        height="1em"
+        viewBox="0 0 16 16"
+        width="1em"
+      >
+        <path
+          d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+          fill="currentColor"
+          fillOpacity="0.9"
+        />
+      </svg>
+    </div>
   </div>
 </div>
 `;
@@ -683,7 +699,23 @@ exports[`Alert Alert operationVue demo works fine 1`] = `
         </div>
       </div>
     </div>
-    <!---->
+    <div
+      class="t-alert__close"
+    >
+      <svg
+        class="t-icon t-icon-close"
+        fill="none"
+        height="1em"
+        viewBox="0 0 16 16"
+        width="1em"
+      >
+        <path
+          d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+          fill="currentColor"
+          fillOpacity="0.9"
+        />
+      </svg>
+    </div>
   </div>
 </div>
 `;
@@ -741,7 +773,23 @@ exports[`Alert Alert titleVue demo works fine 1`] = `
         </div>
       </div>
     </div>
-    <!---->
+    <div
+      class="t-alert__close"
+    >
+      <svg
+        class="t-icon t-icon-close"
+        fill="none"
+        height="1em"
+        viewBox="0 0 16 16"
+        width="1em"
+      >
+        <path
+          d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+          fill="currentColor"
+          fillOpacity="0.9"
+        />
+      </svg>
+    </div>
   </div>
 </div>
 `;
diff --git a/test/unit/comment/__snapshots__/demo.test.js.snap b/test/unit/comment/__snapshots__/demo.test.js.snap
@@ -586,14 +586,14 @@ exports[`Comment Comment replyFormVue demo works fine 1`] = `
             <!---->
           </div>
           <button
-            class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+            class="t-button t-size-m t-button--variant-base t-button--theme-primary form-submit"
             type="button"
           >
             <span
               class="t-button__text"
             >
               
-               回复 
+              回复
               
             </span>
           </button>

diff --git a/test/unit/table/__snapshots__/demo.test.js.snap b/test/unit/table/__snapshots__/demo.test.js.snap
@@ -8795,7 +8795,7 @@ exports[`Table Table multiHeaderVue demo works fine 1`] = `
                 class="t-align-left t-text-ellipsis test2"
                 colspan="1"
                 rowspan="2"
-                style="overflow: hidden;"
+                style="overflow: hidden; border-left: 1px solid #E7E7E7;"
               >
                 属性
               </td>