From 85ee631b124383518fd97e6193c90d7ad2888a4b Mon Sep 17 00:00:00 2001
From: wangyupei <2311595895@qq.com>
Date: Mon, 28 Mar 2022 19:26:30 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(Table):=20=E6=96=B0=E5=A2=9EborderType?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=EF=BC=8C=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E8=BE=B9=E6=A1=86=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/table/src/components/body/body.scss |  1 +
 .../devui/table/src/composable/use-table.ts   |  1 +
 .../devui-vue/devui/table/src/table-types.ts  |  5 ++
 packages/devui-vue/devui/table/src/table.scss | 34 +++++++-
 .../devui-vue/docs/components/table/index.md  | 82 +++++++++++++++----
 5 files changed, 104 insertions(+), 19 deletions(-)

diff --git a/packages/devui-vue/devui/table/src/components/body/body.scss b/packages/devui-vue/devui/table/src/components/body/body.scss
index ac6acb04fb..66255560f8 100644
--- a/packages/devui-vue/devui/table/src/components/body/body.scss
+++ b/packages/devui-vue/devui/table/src/components/body/body.scss
@@ -6,6 +6,7 @@
       font-size: $devui-font-size;
       color: $devui-text;
       background-color: $devui-base-bg;
+      border: none;
 
       &.hover-enabled:hover {
         background-color: $devui-list-item-hover-bg;
diff --git a/packages/devui-vue/devui/table/src/composable/use-table.ts b/packages/devui-vue/devui/table/src/composable/use-table.ts
index ac818eebf4..c0de2a26ef 100644
--- a/packages/devui-vue/devui/table/src/composable/use-table.ts
+++ b/packages/devui-vue/devui/table/src/composable/use-table.ts
@@ -16,6 +16,7 @@ export function useTable(props: TablePropsTypes): TableConfig {
     [ns.m('header-bg')]: props.headerBg,
     [ns.m('layout-auto')]: props.tableLayout === 'auto',
     [ns.m(`${props.size}`)]: true,
+    [ns.m(`${props.borderType}`)]: props.borderType,
   }));
   const style: ComputedRef<CSSProperties> = computed(() => ({
     maxHeight: props.maxHeight,
diff --git a/packages/devui-vue/devui/table/src/table-types.ts b/packages/devui-vue/devui/table/src/table-types.ts
index cae7f97b81..2b35f1a35d 100644
--- a/packages/devui-vue/devui/table/src/table-types.ts
+++ b/packages/devui-vue/devui/table/src/table-types.ts
@@ -2,6 +2,7 @@ import { PropType, ExtractPropTypes, ComponentInternalInstance, InjectionKey } f
 import { TableStore } from './store';
 
 export type TableSize = 'sm' | 'md' | 'lg';
+export type BorderType = '' | 'bordered' | 'borderless';
 
 export type SpanMethod = (data: {
   row: any;
@@ -72,6 +73,10 @@ export const TableProps = {
   spanMethod: {
     type: Function as PropType<SpanMethod>,
   },
+  borderType: {
+    type: String as PropType<BorderType>,
+    default: '',
+  },
 };
 
 export type TablePropsTypes = ExtractPropTypes<typeof TableProps>;
diff --git a/packages/devui-vue/devui/table/src/table.scss b/packages/devui-vue/devui/table/src/table.scss
index 185bd0e08d..054e1682df 100644
--- a/packages/devui-vue/devui/table/src/table.scss
+++ b/packages/devui-vue/devui/table/src/table.scss
@@ -10,7 +10,7 @@
     table-layout: fixed;
     width: 100%;
     border-spacing: 0;
-    border-collapse: separate;
+    border-collapse: collapse;
     border: none;
     margin: 0;
     padding: 0;
@@ -77,4 +77,36 @@
       padding: 8px 20px;
     }
   }
+
+  &--borderless {
+    tbody > tr > td {
+      border-bottom: none;
+    }
+  }
+
+  &--bordered {
+    tr {
+      border-left: 1px solid $devui-dividing-line;
+
+      /* td:first-child {
+      } */
+
+      td {
+        border-right: 1px solid $devui-dividing-line;
+      }
+    }
+
+    thead {
+      tr {
+        th:first-child {
+          border-left: 1px solid $devui-dividing-line;
+        }
+
+        th {
+          border-top: 1px solid $devui-dividing-line;
+          border-right: 1px solid $devui-dividing-line;
+        }
+      }
+    }
+  }
 }
diff --git a/packages/devui-vue/docs/components/table/index.md b/packages/devui-vue/docs/components/table/index.md
index f48c533c6b..d5850fe01c 100644
--- a/packages/devui-vue/docs/components/table/index.md
+++ b/packages/devui-vue/docs/components/table/index.md
@@ -96,8 +96,23 @@ export default defineComponent({
         </d-radio>
       </d-radio-group>
     </div>
+    <div class="table-btn">
+      表格边框：
+      <d-radio-group direction="row" v-model="borderType">
+        <d-radio v-for="item in borderTypeList" :key="item.label" :value="item.value">
+          {{ item.label }}
+        </d-radio>
+      </d-radio-group>
+    </div>
   </div>
-  <d-table :table-layout="tableLayout ? 'auto' : 'fixed'" :striped="striped" :header-bg="headerBg" :data="stripedTableData" :size="size">
+  <d-table
+    :table-layout="tableLayout ? 'auto' : 'fixed'"
+    :striped="striped"
+    :header-bg="headerBg"
+    :data="stripedTableData"
+    :size="size"
+    :border-type="borderType"
+  >
     <d-column field="firstName" header="First Name"></d-column>
     <d-column field="lastName" header="Last Name"></d-column>
     <d-column field="gender" header="Gender"></d-column>
@@ -114,6 +129,7 @@ export default defineComponent({
     const striped = ref(false);
     const headerBg = ref(false);
     const size = ref('sm');
+    const borderType = ref('');
     const sizeList = [
       {
         label: 'Normal',
@@ -128,6 +144,20 @@ export default defineComponent({
         value: 'lg',
       },
     ];
+    const borderTypeList = [
+      {
+        label: 'Normal',
+        value: '',
+      },
+      {
+        label: 'Bordered',
+        value: 'bordered',
+      },
+      {
+        label: 'Borderless',
+        value: 'borderless',
+      },
+    ];
     const stripedTableData = ref([
       {
         firstName: 'Mark',
@@ -161,6 +191,8 @@ export default defineComponent({
       headerBg,
       size,
       sizeList,
+      borderType,
+      borderTypeList,
       tableLayout,
     };
   },
@@ -170,6 +202,7 @@ export default defineComponent({
 <style lang="scss">
 .table-btn-groups {
   display: flex;
+  flex-wrap: wrap;
 }
 .table-btn {
   display: flex;
@@ -333,7 +366,7 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-table :data="baseTableData" :span-method="spanMethod">
+  <d-table :data="baseTableData" :span-method="spanMethod" border-type="bordered">
     <d-column field="firstName" header="First Name"></d-column>
     <d-column field="lastName" header="Last Name"></d-column>
     <d-column field="gender" header="Gender"></d-column>
@@ -394,22 +427,23 @@ export default defineComponent({
 
 ### d-table 参数
 
-| 参数                  | 类型                   | 默认值  | 说明                                        |
-| :-------------------- | :--------------------- | :------ | :------------------------------------------ |
-| data                  | `array`                | []      | 显示的数据                                  |
-| striped               | `boolean`              | false   | 是否显示斑马纹间隔                          |
-| size                  | `'sm' \| 'md' \| 'lg'` | 'sm'    | 可选，表格大小，分别对应行高 40px,48px,56px |
-| max-width             | `string`               | --      | 表格最大宽度                                |
-| max-height            | `boolean`              | --      | 表格最大高度                                |
-| table-width           | `string`               | --      | 表格宽度                                    |
-| table-height          | `string`               | --      | 表格高度                                    |
-| row-hovered-highlight | `boolean`              | true    | 鼠标在该行上时，高亮该行                    |
-| fix-header            | `boolean`              | false   | 固定头部                                    |
-| checkable             | `boolean`              | false   | 在每行的第一列展示一个 checkbox             |
-| show-loading          | `boolean`              | false   | 显示加载动画                                |
-| header-bg             | `boolean`              | false   | 头部背景                                    |
-| table-layout          | `'fixed' \| 'auto'`    | 'fixed' | 表格布局，可选值为'auto'                    |
-| span-method           | `SpanMethod`           | --      | 合并单元格的计算方法                        |
+| 参数                  | 类型                | 默认值  | 说明                                                                   |
+| :-------------------- | :------------------ | :------ | :--------------------------------------------------------------------- |
+| data                  | `array`             | []      | 显示的数据                                                             |
+| striped               | `boolean`           | false   | 是否显示斑马纹间隔                                                     |
+| size                  | `TableSize`         | 'sm'    | 可选，表格大小，分别对应行高 40px,48px,56px                            |
+| max-width             | `string`            | --      | 表格最大宽度                                                           |
+| max-height            | `boolean`           | --      | 表格最大高度                                                           |
+| table-width           | `string`            | --      | 表格宽度                                                               |
+| table-height          | `string`            | --      | 表格高度                                                               |
+| row-hovered-highlight | `boolean`           | true    | 鼠标在该行上时，高亮该行                                               |
+| fix-header            | `boolean`           | false   | 固定头部                                                               |
+| checkable             | `boolean`           | false   | 在每行的第一列展示一个 checkbox                                        |
+| show-loading          | `boolean`           | false   | 显示加载动画                                                           |
+| header-bg             | `boolean`           | false   | 头部背景                                                               |
+| table-layout          | `'fixed' \| 'auto'` | 'fixed' | 表格布局，可选值为'auto'                                               |
+| span-method           | `SpanMethod`        | --      | 合并单元格的计算方法                                                   |
+| border-type           | `BorderType`        | ''      | 可选，表格边框类型，默认有行边框；bordered: 全边框；borderless: 无边框 |
 
 ### d-column 参数
 
@@ -431,6 +465,12 @@ export default defineComponent({
 
 ### 类型定义
 
+#### TableSize
+
+```typescript
+type TableSize = 'sm' | 'md' | 'lg';
+```
+
 #### SpanMethod
 
 ```typescript
@@ -441,3 +481,9 @@ type SpanMethod = (data: {
   columnIndex: number;
 }) => number[] | { rowspan: number; colspan: number };
 ```
+
+#### BorderType
+
+```typescript
+type BorderType = '' | 'bordered' | 'borderless';
+```

From da07e644c38ab08588d5e5a21a9852b336208611 Mon Sep 17 00:00:00 2001
From: wangyupei <2311595895@qq.com>
Date: Mon, 28 Mar 2022 19:27:52 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(Table):=20=E5=88=A0=E9=99=A4=E6=B3=A8?=
 =?UTF-8?q?=E9=87=8A=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/table/src/table.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/devui-vue/devui/table/src/table.scss b/packages/devui-vue/devui/table/src/table.scss
index 054e1682df..16ba96343d 100644
--- a/packages/devui-vue/devui/table/src/table.scss
+++ b/packages/devui-vue/devui/table/src/table.scss
@@ -88,9 +88,6 @@
     tr {
       border-left: 1px solid $devui-dividing-line;
 
-      /* td:first-child {
-      } */
-
       td {
         border-right: 1px solid $devui-dividing-line;
       }