From 5cd50c87d1aa76b3ec837960049ab97530d6e403 Mon Sep 17 00:00:00 2001
From: wanchun <445436867@qq.com>
Date: Tue, 20 Jun 2023 12:55:02 +0800
Subject: [PATCH] =?UTF-8?q?break:=20=E5=A2=9E=E5=8A=A0horizontalLine?=
 =?UTF-8?q?=E5=92=8CverticalLine=E6=8E=A7=E5=88=B6=E8=A1=8C=E5=92=8C?=
 =?UTF-8?q?=E5=88=97=E4=B9=8B=E9=97=B4=E7=9A=84=E5=88=86=E5=89=B2=E7=BA=BF?=
 =?UTF-8?q?,=20=E8=AE=BE=E7=BD=AEbordered=E4=B8=8D=E5=86=8D=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E8=AE=BE=E7=BD=AE=E8=A1=8C=E5=88=97=E5=88=86=E5=89=B2?=
 =?UTF-8?q?=E7=BA=BF=E4=B8=BAtrue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/table/style/index.less             | 142 ++++++++++--------
 components/table/table.tsx                    |   8 +
 components/table/useTableStyle.ts             |   2 +
 docs/.vitepress/components/table/header.vue   |   4 +-
 .../components/table/horizontalLine.vue       |  27 ++++
 docs/.vitepress/components/table/index.md     |  13 +-
 docs/.vitepress/components/table/span.vue     |   2 +-
 .../components/table/verticalLine.vue         |  27 ++++
 8 files changed, 160 insertions(+), 65 deletions(-)
 create mode 100644 docs/.vitepress/components/table/horizontalLine.vue
 create mode 100644 docs/.vitepress/components/table/verticalLine.vue

diff --git a/components/table/style/index.less b/components/table/style/index.less
index 2ad26d5e..6ecfb55e 100644
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@@ -16,39 +16,44 @@
     .text();
     overflow: hidden;
     background-color: var(--f-white);
-    &, * {
+
+    &,
+    * {
         box-sizing: border-box;
     }
-    .hidden-columns{
+
+    .hidden-columns {
         display: none;
     }
+
     & &-header-wrapper,
-    & &-body-wrapper{
+    & &-body-wrapper {
         width: 100%;
         height: auto;
         overflow: hidden;
         scrollbar-width: none;
-        &::-webkit-scrollbar {
-            display: none;
-        }
-    }
-    & &-header-wrapper,
-    & &-body-wrapper {
+
         &.is-scrolling-x-left,
         &.is-scrolling-x-middle {
             .@{table-prefix}-fixed-right.is-first {
                 box-shadow: -1px 2px var(--f-shadow-radius-sm) var(--f-shadow-color-sm);
             }
         }
+
         &.is-scrolling-x-right,
         &.is-scrolling-x-middle {
             .@{table-prefix}-fixed-left.is-last {
                 box-shadow: 2px 2px var(--f-shadow-radius-sm) -1px var(--f-shadow-color-sm);
             }
         }
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
     }
+
     & &-header,
-    & &-body{
+    & &-body {
         display: table;
         margin: 0;
         padding: 0;
@@ -56,38 +61,58 @@
         border: 0;
         border-collapse: separate;
         border-spacing: 0;
+
         .@{table-prefix}-row {
             box-sizing: border-box;
             border: none;
+
+            &.is-opened {
+                .@{table-prefix}-expand-icon {
+                    transform: rotate(0);
+                }
+
+                &+.@{table-prefix}-tr {
+                    .@{table-prefix}-td {
+                        background-color: var(--f-component-bg-color);
+                    }
+                }
+            }
         }
-        .@{table-prefix}-th, .@{table-prefix}-td {
+
+        .@{table-prefix}-th,
+        .@{table-prefix}-td {
             position: relative;
             min-width: 0;
             margin: 0;
             padding: 0;
             background-color: var(--f-white);
             border: none;
+
             &.@{table-prefix}-fixed-left {
                 position: sticky;
                 left: 0;
                 z-index: 2;
             }
+
             &.@{table-prefix}-fixed-right {
                 position: sticky;
                 right: 0;
                 z-index: 2;
             }
         }
+
         .@{table-prefix}-th {
             font-weight: @font-weight-medium;
             background-color: var(--f-component-bg-color);
         }
+
         .@{table-prefix}-td {
             background-color: var(--f-white);
-            border-bottom: @table-border;
+
             &.@{table-prefix}-no-data {
                 text-align: center;
             }
+
             &.@{table-prefix}-cell {
                 overflow: hidden;
                 white-space: normal;
@@ -95,55 +120,24 @@
             }
         }
     }
-    & &-body{
-        .@{table-prefix}-row.is-opened{
-            .@{table-prefix}-td {
-                border-bottom: none;
-            }
-            .@{table-prefix}-expand-icon {
-                transform: rotate(0);
-            }
-            & + .@{table-prefix}-tr {
-                .@{table-prefix}-td {
-                    background-color: var(--f-component-bg-color);
-                }
-            }
-        }
+
+    &.is-bordered {
+        border: @table-border;
     }
-    &.is-bordered{
-        border:  @table-border;
-        .@{table-prefix}-header {
-            .@{table-prefix}-th {
-                border-bottom: @table-border;
-                border-right: @table-border;
-            }
-            thead .@{table-prefix}-row {
-                .@{table-prefix}-th {
-                    &:last-child {
-                        border-right: none;
-                    }
-                }
-            }
+
+    &.is-horizontal-line {
+        .@{table-prefix}-td, .@{table-prefix}-th {
+            border-bottom: @table-border;
         }
-        .@{table-prefix}-body {
-            .@{table-prefix}-th,
-            .@{table-prefix}-td {
-                border-right: @table-border;
-            }
-            thead .@{table-prefix}-row {
-                .@{table-prefix}-th {
-                    border-bottom: @table-border;
-                    &:last-child {
-                        border-right: none;
-                    }
+        .@{table-prefix}-row {
+            &.is-opened {
+                .@{table-prefix}-td {
+                    border-bottom: none;
                 }
             }
+        }
+        &.is-bordered {
             tbody .@{table-prefix}-row {
-                .@{table-prefix}-td {
-                    &:last-child {
-                        border-right: none;
-                    }
-                }
                 &:last-child {
                     .@{table-prefix}-td {
                         border-bottom: none;
@@ -152,22 +146,43 @@
             }
         }
     }
+
+    &.is-vertical-line {
+        .@{table-prefix}-th,
+        .@{table-prefix}-td {
+            border-right: @table-border;
+        }
+
+        .@{table-prefix}-row {
+            .@{table-prefix}-td, 
+            .@{table-prefix}-th {
+                &:last-child {
+                    border-right: none;
+                }
+            }
+        }
+    }
+
     &.is-size-middle {
         .@{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;
             }
         }
     }
+
     &-expand-icon {
         color: var(--f-text-color);
         font-size: @font-size-head;
@@ -175,11 +190,13 @@
         cursor: pointer;
         transition: all @animation-duration-base @ease-in-out;
     }
+
     &-center {
         display: flex;
         align-items: center;
     }
-    & &-sorter{
+
+    & &-sorter {
         margin-top: -0.2em;
         margin-left: @padding-sm;
         vertical-align: middle;
@@ -187,29 +204,34 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        .@{table-prefix}-sorter-up{
+
+        .@{table-prefix}-sorter-up {
             width: 0;
             height: 0;
             border-bottom: 4px solid var(--f-disabled-color-base);
             border-right: 4px solid transparent;
             border-left: 4px solid transparent;
+
             &.is-active {
                 border-bottom-color: var(--f-primary-color);
             }
         }
-        .@{table-prefix}-sorter-down{
+
+        .@{table-prefix}-sorter-down {
             margin-top: calc(@padding-xs / 4);
             width: 0;
             height: 0;
             border-top: 4px solid var(--f-disabled-color-base);
             border-right: 4px solid transparent;
             border-left: 4px solid transparent;
+
             &.is-active {
                 border-top-color: var(--f-primary-color);
             }
         }
     }
+
     & &-th-sortable {
         cursor: pointer;
     }
-}
+}
\ No newline at end of file
diff --git a/components/table/table.tsx b/components/table/table.tsx
index 2b73b9b4..e9599c2d 100644
--- a/components/table/table.tsx
+++ b/components/table/table.tsx
@@ -89,6 +89,14 @@ const tableProps = {
             return [];
         },
     },
+    horizontalLine: {
+        type: Boolean,
+        default: true,
+    },
+    verticalLine: {
+        type: Boolean,
+        default: false,
+    },
 } as const;
 
 export type TableProps = Partial<ExtractPropTypes<typeof tableProps>>;
diff --git a/components/table/useTableStyle.ts b/components/table/useTableStyle.ts
index 6dc3fd0b..8448452a 100644
--- a/components/table/useTableStyle.ts
+++ b/components/table/useTableStyle.ts
@@ -33,6 +33,8 @@ export default ({
             prefixCls,
             props.bordered && 'is-bordered',
             props.size && `is-size-${props.size}`,
+            props.horizontalLine && 'is-horizontal-line',
+            props.verticalLine && 'is-vertical-line',
         ]
             .filter(Boolean)
             .join(' '),
diff --git a/docs/.vitepress/components/table/header.vue b/docs/.vitepress/components/table/header.vue
index 0930f2b2..d9b788b7 100644
--- a/docs/.vitepress/components/table/header.vue
+++ b/docs/.vitepress/components/table/header.vue
@@ -1,9 +1,9 @@
 <template>
-    <f-table :data="data" bordered>
+    <f-table :data="data" bordered verticalLine>
         <f-table-column
             prop="date"
             label="日期"
-            :ellipsis="{ tooltip: { popperClass: 'a', showAfter: 500 } }"
+            :ellipsis="{ tooltip: { popperClass: 'a', showAfter: 500 }}"
             :width="150"
         ></f-table-column>
         <f-table-column label="配送信息">
diff --git a/docs/.vitepress/components/table/horizontalLine.vue b/docs/.vitepress/components/table/horizontalLine.vue
new file mode 100644
index 00000000..39568b68
--- /dev/null
+++ b/docs/.vitepress/components/table/horizontalLine.vue
@@ -0,0 +1,27 @@
+<template>
+    <f-table :horizontalLine="false" :data="data">
+        <f-table-column prop="date" label="日期"></f-table-column>
+        <f-table-column prop="name" label="姓名"></f-table-column>
+        <f-table-column prop="address" label="地址"></f-table-column>
+    </f-table>
+</template>
+<script>
+import { reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+    setup() {
+        const data = reactive(
+            Array.from([1, 2, 3], (i) => {
+                return {
+                    date: `2016-05-${i < 10 ? '0' + i : i}`,
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1516 弄',
+                };
+            }),
+        );
+        return {
+            data,
+        };
+    },
+});
+</script>
diff --git a/docs/.vitepress/components/table/index.md b/docs/.vitepress/components/table/index.md
index 650e2491..d2ffd6eb 100644
--- a/docs/.vitepress/components/table/index.md
+++ b/docs/.vitepress/components/table/index.md
@@ -16,12 +16,19 @@ app.use(FTable);
 
 --COMMON
 
-#### 带边框表格
+#### 边框和分割线
 
-配置`bordered`即可。
+默认无边框，配置`bordered`则有
 
 --BORDERED
 
+默认有水平分割线，配置`horizontalLine=false`则无水平分割线
+
+--horizontalLine
+
+默认无垂直分割线，配置`verticalLine`则有
+
+--verticalLine
 
 ### 固定表头
 
@@ -109,6 +116,8 @@ app.use(FTable);
 | 属性         | 说明                                                                          | 类型                                             | 可选值 | 默认值     |
 | ------------ | ----------------------------------------------------------------------------- | ------------------------------------------------ | ------ | ---------- |
 | bordered     | 是否展示列边框                                                                | boolean                                          | -      | `false`    |
+| horizontalLine     | 是否展示水平分割线                                                               | boolean                                          | -      | `true`    |
+| verticalLine     | 是否展示垂直分割线                                                                | boolean                                          | -      | `false`    |
 | rowClassName | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | string \| object \| array \| ({ row, column, rowIndex, columnIndex, cellValue })=> ( object \| array \| string ) | -      | -          |
 | rowStyle     | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | object \| ({row, rowIndex})=> object               | -      | -          |
 | data         | 数据                                                                          | array                                            | -      | `[]`       |
diff --git a/docs/.vitepress/components/table/span.vue b/docs/.vitepress/components/table/span.vue
index 632ee3d4..b0125d64 100644
--- a/docs/.vitepress/components/table/span.vue
+++ b/docs/.vitepress/components/table/span.vue
@@ -1,5 +1,5 @@
 <template>
-    <f-table :data="data" :span-method="objectSpanMethod" bordered>
+    <f-table :data="data" :span-method="objectSpanMethod" bordered verticalLine>
         <f-table-column prop="id" label="ID" :width="180"></f-table-column>
         <f-table-column prop="name" label="姓名"> </f-table-column>
         <f-table-column prop="amount1" label="数值 1（元）"></f-table-column>
diff --git a/docs/.vitepress/components/table/verticalLine.vue b/docs/.vitepress/components/table/verticalLine.vue
new file mode 100644
index 00000000..5fa17919
--- /dev/null
+++ b/docs/.vitepress/components/table/verticalLine.vue
@@ -0,0 +1,27 @@
+<template>
+    <f-table :verticalLine="true" :data="data">
+        <f-table-column prop="date" label="日期"></f-table-column>
+        <f-table-column prop="name" label="姓名"></f-table-column>
+        <f-table-column prop="address" label="地址"></f-table-column>
+    </f-table>
+</template>
+<script>
+import { reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+    setup() {
+        const data = reactive(
+            Array.from([1, 2, 3], (i) => {
+                return {
+                    date: `2016-05-${i < 10 ? '0' + i : i}`,
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1516 弄',
+                };
+            }),
+        );
+        return {
+            data,
+        };
+    },
+});
+</script>