feat: Table组件提供API 展开关闭行(#96)

* feat: 手动展开行

* docs: 修改文档

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,

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 {

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列的对应的宽度

components/table/useTableExpand.ts

@@ -40,19 +40,26 @@ 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) {
             expandOpenedList.splice(index, 1);
         } 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,
     };
 };

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,
         };
     },
 };

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