From f262c3d53125e4dff8bd8f32aa712a9654522131 Mon Sep 17 00:00:00 2001
From: wanchun <445436867@qq.com>
Date: Fri, 1 Apr 2022 18:08:43 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=89=8B=E5=8A=A8=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/table/components/expandTr.tsx    |  2 +-
 components/table/style/index.less           |  6 +++++
 components/table/table.tsx                  |  4 +++-
 components/table/useTableExpand.ts          | 11 +++++++--
 docs/.vitepress/components/table/expand.vue | 25 +++++++++++++++++++--
 docs/.vitepress/components/table/index.md   |  3 ++-
 pnpm-lock.yaml                              |  6 -----
 7 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/components/table/components/expandTr.tsx b/components/table/components/expandTr.tsx
index 02868f95..1939bcd8 100644
--- a/components/table/components/expandTr.tsx
+++ b/components/table/components/expandTr.tsx
@@ -26,7 +26,7 @@ export default defineComponent({
                     <tr class={`${prefixCls}-row`}>
                         <td
                             colspan={length}
-                            class={`${prefixCls}-td ${prefixCls}-cell`}
+                            class={`${prefixCls}-td ${prefixCls}-cell ${prefixCls}-expanded-cell`}
                         >
                             {column.slots.default({
                                 row,
diff --git a/components/table/style/index.less b/components/table/style/index.less
index 5fc3f834..ad9078ba 100644
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@@ -161,11 +161,17 @@
     &.is-size-normal {
         .@{table-prefix}-cell {
             padding: @padding-md;
+            &.@{table-prefix}-expanded-cell {
+                padding: 0;
+            }
         }
     }
     &.is-size-small {
         .@{table-prefix}-cell {
             padding: @padding-xs;
+            &.@{table-prefix}-expanded-cell {
+                padding: 0;
+            }
         }
     }
     .@{table-prefix}-expand-icon {
diff --git a/components/table/table.tsx b/components/table/table.tsx
index 89cb8a4e..6a1e12b5 100644
--- a/components/table/table.tsx
+++ b/components/table/table.tsx
@@ -89,13 +89,15 @@ export default defineComponent({
             layout,
             columns,
             rootProps,
+            toggleRowExpend,
         } = useTable(props, ctx);
-
+        
         ctx.expose &&
             ctx.expose({
                 toggleRowSelection: handleSelect,
                 toggleAllSelection: handleSelectAll,
                 clearSelection: clearSelect,
+                toggleRowExpend
             });
 
         // 计算出传入columns列的对应的宽度
diff --git a/components/table/useTableExpand.ts b/components/table/useTableExpand.ts
index ce54f2a9..bf34e35c 100644
--- a/components/table/useTableExpand.ts
+++ b/components/table/useTableExpand.ts
@@ -40,7 +40,7 @@ export default ({
         return expandOpenedList.includes(rowKey);
     };
 
-    const handleExpand = ({ row }: { row: RowType }) => {
+    const toggleRowExpend = ({ row }: { row: RowType }) => {
         const rowKey = getRowKey({ row });
         const index = expandOpenedList.indexOf(rowKey);
         if (index !== -1) {
@@ -48,11 +48,18 @@ export default ({
         } else {
             expandOpenedList.push(rowKey);
         }
-        ctx.emit('expandChange', { row, expanded: !index });
+        return index === -1;
     };
+
+    const handleExpand = ({ row }: { row: RowType }) => {
+        const expanded = toggleRowExpend({ row });
+        ctx.emit('expandChange', { row, expanded });
+    };
+
     return {
         expandColumn,
         isExpandOpened,
+        toggleRowExpend,
         handleExpand,
     };
 };
diff --git a/docs/.vitepress/components/table/expand.vue b/docs/.vitepress/components/table/expand.vue
index a7d74985..5dfc6443 100644
--- a/docs/.vitepress/components/table/expand.vue
+++ b/docs/.vitepress/components/table/expand.vue
@@ -1,7 +1,16 @@
 <template>
-    <f-table :data="data" rowKey="date">
+    <f-table
+        ref="tableRef"
+        :data="data"
+        rowKey="date"
+        @expandChange="expandChange"
+    >
         <f-table-column v-slot="{ row }" type="expand">
-            <f-grid :gutter="[20, 20]" wrap>
+            <f-grid
+                :gutter="[20, 20]"
+                wrap
+                style="background: #f8f8f8; padding: 16px"
+            >
                 <f-grid-item :span="12"> 省份：{{ row.province }} </f-grid-item>
                 <f-grid-item :span="12"> 市区：{{ row.city }} </f-grid-item>
                 <f-grid-item :span="12"> 邮编：{{ row.zip }} </f-grid-item>
@@ -11,10 +20,13 @@
         <f-table-column prop="date" label="日期"></f-table-column>
         <f-table-column prop="name" label="姓名"></f-table-column>
     </f-table>
+    <f-button @click="toggle">手动展开/关闭第一行</f-button>
 </template>
 <script>
+import { ref } from 'vue';
 export default {
     setup() {
+        const tableRef = ref(null);
         const data = Array.from([1, 2, 3], (i) => {
             return {
                 date: `2016-05-2016-05-2016-05-2016-05-2016-05-2016-05-2016-05-2016-05-${
@@ -27,8 +39,17 @@ export default {
                 zip: 200333,
             };
         });
+        const expandChange = ({ row, expanded }) => {
+            console.log(row, expanded);
+        };
+        const toggle = () => {
+            tableRef.value.toggleRowExpend({ row: data[0] });
+        };
         return {
+            tableRef,
             data,
+            toggle,
+            expandChange,
         };
     },
 };
diff --git a/docs/.vitepress/components/table/index.md b/docs/.vitepress/components/table/index.md
index 6395a668..12c26f2b 100644
--- a/docs/.vitepress/components/table/index.md
+++ b/docs/.vitepress/components/table/index.md
@@ -128,8 +128,9 @@ app.use(FTable);
 | 名称               | 说明                               | 参数  |
 | ------------------ | ---------------------------------- | ----- |
 | clearSelection     | 用于多选表格，清空用户的选择       | -     |
-| toggleRowSelection | 用于多选表格，切换某一行的选中状态 | *{row}* |
+| toggleRowSelection | 用于多选表格，切换某一行的选中状态 | *toggleRowSelection({row})* |
 | toggleAllSelection | 用于多选表格，切换全选和全不选     | -     |
+| toggleRowExpend | 用于展开某行     | *toggleRowExpend({row})*    | 
 
 ## FTableColumn Props
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f96c1e0d..a994e634 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,7 +12,6 @@ specifiers:
   '@commitlint/config-conventional': ^13.1.0
   '@floating-ui/dom': ^0.4.2
   '@juggle/resize-observer': ^3.3.1
-  '@popperjs/core': ^2.4.0
   '@rollup/plugin-babel': ^5.3.0
   '@rollup/plugin-commonjs': ^21.0.1
   '@rollup/plugin-json': ^4.1.0
@@ -79,7 +78,6 @@ dependencies:
   '@babel/runtime': 7.16.3
   '@floating-ui/dom': 0.4.2
   '@juggle/resize-observer': 3.3.1
-  '@popperjs/core': 2.11.0
   '@types/lodash-es': 4.17.5
   '@types/normalize-wheel': 1.0.0
   '@vue/shared': 3.2.24
@@ -2214,10 +2212,6 @@ packages:
       fastq: 1.13.0
     dev: true
 
-  /@popperjs/core/2.11.0:
-    resolution: {integrity: sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==, tarball: '@popperjs/core/download/@popperjs/core-2.11.0.tgz'}
-    dev: false
-
   /@rollup/plugin-babel/5.3.0_@babel+core@7.16.0+rollup@2.60.2:
     resolution: {integrity: sha1-nLHFFG3daklorZbyCcUMYvkvmHk=, tarball: '@rollup/plugin-babel/download/@rollup/plugin-babel-5.3.0.tgz?cache=0&sync_timestamp=1636338113224&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40rollup%2Fplugin-babel%2Fdownload%2F%40rollup%2Fplugin-babel-5.3.0.tgz'}
     engines: {node: '>= 10.0.0'}

From cba7f3924afb5a2c987dc508593616d43c68ec62 Mon Sep 17 00:00:00 2001
From: harrywan <445436867@qq.com>
Date: Sat, 2 Apr 2022 10:29:55 +0800
Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=E4=BF=AE=E6=94=B9=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/components/table/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/components/table/index.md b/docs/.vitepress/components/table/index.md
index 12c26f2b..4f2f4b0e 100644
--- a/docs/.vitepress/components/table/index.md
+++ b/docs/.vitepress/components/table/index.md
@@ -130,7 +130,7 @@ app.use(FTable);
 | clearSelection     | 用于多选表格，清空用户的选择       | -     |
 | toggleRowSelection | 用于多选表格，切换某一行的选中状态 | *toggleRowSelection({row})* |
 | toggleAllSelection | 用于多选表格，切换全选和全不选     | -     |
-| toggleRowExpend | 用于展开某行     | *toggleRowExpend({row})*    | 
+| toggleRowExpend | 用于控制某行的展开隐藏     | *toggleRowExpend({row})*    | 
 
 ## FTableColumn Props