fix(table): expanded colspan and fixed expanded icon (#255)

* fix(table): expanded colspan and fixed expanded icon * test: update snapshots * test: update snapshotz Co-authored-by: chaishi <[email protected]>
Tencent · Jan 18, 2022 · 471abd8 · 471abd8
1 parent 0d895c6
commit 471abd8
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 52 deletions.
diff --git a/src/table/primary-table/mixins/expand.tsx b/src/table/primary-table/mixins/expand.tsx
@@ -20,10 +20,25 @@ export default Vue.extend({
     rowKey: baseTableProps.rowKey,
     ...ExpandProps,
   },
+  data() {
+    return {
+      hasExpandedColumn: false,
+    };
+  },
   computed: {
     reRowKey(): string {
       return this.rowKey || 'id';
     },
+    columnLength(): number {
+      let len = this.columns.length;
+      if (this.hasExpandedColumn) {
+        len += 1;
+      }
+      return len;
+    },
+    isFirstColumnFixed(): boolean {
+      return this.columns[0].fixed === 'left';
+    },
   },
   methods: {
     getExpandRowHandler(): TdPrimaryTableProps['expandedRow'] {
@@ -32,7 +47,9 @@ export default Vue.extend({
     },
     getExpandColumns(columns: Columns): Columns {
       const expandRowHandler = this.getExpandRowHandler();
-      if (!expandRowHandler || !this.expandIcon) return columns;
+      const hasExpandedColumn = Boolean(expandRowHandler && this.expandIcon);
+      this.hasExpandedColumn = hasExpandedColumn;
+      if (!hasExpandedColumn) return columns;
       return [
         {
           colKey: expandedColKey,
@@ -43,6 +60,7 @@ export default Vue.extend({
               overflow: 'auto',
             },
           },
+          fixed: this.isFirstColumnFixed ? 'left' : undefined,
           cell: (h, { row, rowIndex }) => this.renderExpandIconCell({ row, rowIndex }),
         },
         ...columns,
@@ -75,8 +93,10 @@ export default Vue.extend({
       const isShowExpanded = this.expandedRowKeys.includes(id);
       if (isShowExpanded) {
         return (
-          <tr>
-            <td colspan={this.columns.length}>{renderTNodeJSX(this, 'expandedRow', { params })}</td>
+          <tr class={`${prefix}-table__expanded-row`}>
+            <td colspan={this.columnLength} class={`${prefix}-table__row--full`}>
+              <div class={`${prefix}-table__expanded-row-inner`}>{renderTNodeJSX(this, 'expandedRow', { params })}</div>
+            </td>
           </tr>
         );
       }

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -10953,15 +10953,17 @@ exports[`ssr snapshot test renders ./examples/table/demos/expandable.vue correct
               <td class="" key="description" length="6">test</td>
               <td class="" key="op" length="6" style="overflow:hidden;"><a class="link">管理</a> <a class="link">删除</a></td>
             </tr>
-            <tr>
-              <td colspan="5">
-                <div class="more-detail">
-                  <p class="title"><b>集群名称:</b></p>
-                  <p class="content">集群测试2</p><br>
-                  <p class="title"><b>管理员:</b></p>
-                  <p class="content">jenny</p><br>
-                  <p class="title"><b>描述:</b></p>
-                  <p class="content">test</p>
+            <tr class="t-table__expanded-row">
+              <td colspan="6" class="t-table__row--full">
+                <div class="t-table__expanded-row-inner">
+                  <div class="more-detail">
+                    <p class="title"><b>集群名称:</b></p>
+                    <p class="content">集群测试2</p><br>
+                    <p class="title"><b>管理员:</b></p>
+                    <p class="content">jenny</p><br>
+                    <p class="title"><b>描述:</b></p>
+                    <p class="content">test</p>
+                  </div>
                 </div>
               </td>
             </tr>

diff --git a/test/unit/table/__snapshots__/demo.test.js.snap b/test/unit/table/__snapshots__/demo.test.js.snap
@@ -1560,51 +1560,58 @@ exports[`Table expandable demo works fine 1`] = `
                 </a>
               </td>
             </tr>
-            <tr>
+            <tr
+              class="t-table__expanded-row"
+            >
               <td
-                colspan="5"
+                class="t-table__row--full"
+                colspan="6"
               >
                 <div
-                  class="more-detail"
+                  class="t-table__expanded-row-inner"
                 >
-                  <p
-                    class="title"
-                  >
-                    <b>
-                      集群名称:
-                    </b>
-                  </p>
-                  <p
-                    class="content"
-                  >
-                    集群测试2
-                  </p>
-                  <br />
-                  <p
-                    class="title"
-                  >
-                    <b>
-                      管理员:
-                    </b>
-                  </p>
-                  <p
-                    class="content"
-                  >
-                    jenny
-                  </p>
-                  <br />
-                  <p
-                    class="title"
+                  <div
+                    class="more-detail"
                   >
-                    <b>
-                      描述:
-                    </b>
-                  </p>
-                  <p
-                    class="content"
-                  >
-                    test
-                  </p>
+                    <p
+                      class="title"
+                    >
+                      <b>
+                        集群名称:
+                      </b>
+                    </p>
+                    <p
+                      class="content"
+                    >
+                      集群测试2
+                    </p>
+                    <br />
+                    <p
+                      class="title"
+                    >
+                      <b>
+                        管理员:
+                      </b>
+                    </p>
+                    <p
+                      class="content"
+                    >
+                      jenny
+                    </p>
+                    <br />
+                    <p
+                      class="title"
+                    >
+                      <b>
+                        描述:
+                      </b>
+                    </p>
+                    <p
+                      class="content"
+                    >
+                      test
+                    </p>
+                  </div>
                 </div>
               </td>
             </tr>