feat(Table): 新增borderType参数，支持设置表格边框类型 (DevCloudFE#355)

* feat(Table): 新增borderType参数，支持设置表格边框类型 * feat(Table): 删除注释代码

Author: xingyan95

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;

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,

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

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,33 @@
  padding: 8px 20px;
  }
  }
+
+ &--borderless {
+ tbody > tr > td {
+ border-bottom: none;
+ }
+ }
+
+ &--bordered {
+ tr {
+ border-left: 1px solid $devui-dividing-line;
+
+ 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;
+ }
+ }
+ }
+ }
 }

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';
+```