break: 增加horizontalLine和verticalLine控制行和列之间的分割线, 设置bordered不再默认设置行列分割…

…线为true

components/table/style/index.less

@@ -16,134 +16,128 @@
     .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;
         table-layout: fixed;
         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;
                 word-break: break-all;
             }
         }
     }
-    & &-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,64 +146,92 @@
             }
         }
     }
+
+    &.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;
         transform: rotate(-90deg);
         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;
         display: inline-flex;
         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;
     }
-}
+}

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

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(' '),

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="配送信息">

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>

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                                            | -      | `[]`       |

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>