Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kagol merged 2 commits into from
Mar 29, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
85ee631
feat(Table): 新增borderType参数，支持设置表格边框类型
xingyan95 Mar 28, 2022
da07e64
feat(Table): 删除注释代码
xingyan95 Mar 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/devui-vue/devui/table/src/components/body/body.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions packages/devui-vue/devui/table/src/composable/use-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
5 changes: 5 additions & 0 deletions packages/devui-vue/devui/table/src/table-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>;
Expand Down
31 changes: 30 additions & 1 deletion packages/devui-vue/devui/table/src/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
table-layout: fixed;
width: 100%;
border-spacing: 0;
border-collapse: separate;
border-collapse: collapse;
border: none;
margin: 0;
padding: 0;
Expand Down Expand Up @@ -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;
}
}
}
}
}
82 changes: 64 additions & 18 deletions packages/devui-vue/docs/components/table/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -161,6 +191,8 @@ export default defineComponent({
headerBg,
size,
sizeList,
borderType,
borderTypeList,
tableLayout,
};
},
Expand All @@ -170,6 +202,7 @@ export default defineComponent({
<style lang="scss">
.table-btn-groups {
display: flex;
flex-wrap: wrap;
}
.table-btn {
display: flex;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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 参数

Expand All @@ -431,6 +465,12 @@ export default defineComponent({

### 类型定义

#### TableSize

```typescript
type TableSize = 'sm' | 'md' | 'lg';
```

#### SpanMethod

```typescript
Expand All @@ -441,3 +481,9 @@ type SpanMethod = (data: {
columnIndex: number;
}) => number[] | { rowspan: number; colspan: number };
```

#### BorderType

```typescript
type BorderType = '' | 'bordered' | 'borderless';
```