Skip to content

Commit 9c1d687

Browse files
xingyan95xingyan95
authored
feat(Table): 优化Table组件文档 (#403)
1 parent f542431 commit 9c1d687

File tree

3 files changed

+159
-66
lines changed

3 files changed

+159
-66
lines changed

‎packages/devui-vue/devui/table/src/components/colgroup/colgroup.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,8 @@ export default defineComponent({
77
const parent = inject(TABLE_TOKEN);
88
const columns = parent?.store.states._columns;
99
return () =>
10-
parent?.props.tableLayout === 'fixed' ? (
10+
parent?.props.fixHeader ? (
1111
<colgroup>
12-
{/* 如果是 checkable，那么需要指定 col */}
13-
{parent.props.checkable ? <col width={36} /> : null}
1412
{columns?.value.map((column, index) => {
1513
return <col key={index} width={column.realWidth}></col>;
1614
})}

‎packages/devui-vue/devui/table/src/table-types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export const TableProps = {
5757
},
5858
tableLayout: {
5959
type: String as PropType<'fixed' | 'auto'>,
60-
default: 'auto',
60+
default: 'fixed',
6161
validator(v: string): boolean {
6262
return v === 'fixed' || v === 'auto';
6363
},

‎packages/devui-vue/docs/components/table/index.md‎

Lines changed: 157 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export default defineComponent({
6363

6464
### 表格样式
6565

66-
:::demo
66+
:::demo `table-layout`参数设置表格的布局方式，目前支持`fixed`和`auto`两种类型；`striped`参数设置是否显示斑马纹；`header-bg`参数设置是否显示表头背景色；`size`参数设置表格大小；`border-type`设置表格边框样式。
6767

6868
```vue
6969
<template>
@@ -466,7 +466,7 @@ export default defineComponent({
466466
<template>
467467
<div>
468468
<d-button @click="handleClick">更新数据</d-button>
469-
<d-table :data="emptyData">
469+
<d-table :data="emptyData" :show-loading="showLoading">
470470
<d-column field="firstName" header="First Name"></d-column>
471471
<d-column field="lastName" header="Last Name"></d-column>
472472
<d-column field="gender" header="Gender"></d-column>
@@ -481,36 +481,119 @@ import { defineComponent, ref } from 'vue';
481481
export default defineComponent({
482482
setup() {
483483
const emptyData = ref([]);
484+
const showLoading = ref(false);
484485
const handleClick = () => {
485-
emptyData.value = [
486-
{
487-
firstName: 'po',
488-
lastName: 'Lang',
489-
gender: 'Male',
490-
date: '1990/01/15',
491-
},
492-
{
493-
firstName: 'john',
494-
lastName: 'Li',
495-
gender: 'Female',
496-
date: '1990/01/16',
497-
},
498-
{
499-
firstName: 'peng',
500-
lastName: 'Li',
501-
gender: 'Male',
502-
date: '1990/01/17',
503-
},
504-
{
505-
firstName: 'Dale',
506-
lastName: 'Yu',
507-
gender: 'Female',
508-
date: '1990/01/18',
509-
},
510-
];
486+
showLoading.value = true;
487+
setTimeout(() => {
488+
showLoading.value = false;
489+
emptyData.value = [
490+
{
491+
firstName: 'po',
492+
lastName: 'Lang',
493+
gender: 'Male',
494+
date: '1990/01/15',
495+
},
496+
{
497+
firstName: 'john',
498+
lastName: 'Li',
499+
gender: 'Female',
500+
date: '1990/01/16',
501+
},
502+
{
503+
firstName: 'peng',
504+
lastName: 'Li',
505+
gender: 'Male',
506+
date: '1990/01/17',
507+
},
508+
{
509+
firstName: 'Dale',
510+
lastName: 'Yu',
511+
gender: 'Female',
512+
date: '1990/01/18',
513+
},
514+
];
515+
}, 1000);
511516
};
512517
513-
return { emptyData, handleClick };
518+
return { emptyData, showLoading, handleClick };
519+
},
520+
});
521+
</script>
522+
```
523+
524+
:::
525+
526+
### 固定表头
527+
528+
:::demo `fix-header`参数可以设置是否固定表头，使之不随内容滚动。
529+
530+
```vue
531+
<template>
532+
<d-table :data="dataSource" table-height="200px" fix-header>
533+
<d-column field="firstName" header="First Name"></d-column>
534+
<d-column field="lastName" header="Last Name"></d-column>
535+
<d-column field="gender" header="Gender"></d-column>
536+
<d-column field="date" header="Date of birth"></d-column>
537+
</d-table>
538+
</template>
539+
540+
<script>
541+
import { defineComponent, ref } from 'vue';
542+
543+
export default defineComponent({
544+
setup() {
545+
const dataSource = ref([
546+
{
547+
firstName: 'Mark',
548+
lastName: 'Otto',
549+
date: '1990/01/11',
550+
gender: 'Male',
551+
},
552+
{
553+
firstName: 'Jacob',
554+
lastName: 'Thornton',
555+
gender: 'Female',
556+
date: '1990/01/12',
557+
},
558+
{
559+
firstName: 'Danni',
560+
lastName: 'Chen',
561+
gender: 'Male',
562+
date: '1990/01/13',
563+
},
564+
{
565+
firstName: 'green',
566+
lastName: 'gerong',
567+
gender: 'Male',
568+
date: '1990/01/14',
569+
},
570+
{
571+
firstName: 'po',
572+
lastName: 'lang',
573+
gender: 'Male',
574+
date: '1990/01/14',
575+
},
576+
{
577+
firstName: 'john',
578+
lastName: 'li',
579+
gender: 'Male',
580+
date: '1990/01/14',
581+
},
582+
{
583+
firstName: 'peng',
584+
lastName: 'li',
585+
gender: 'Female',
586+
date: '1990/01/14',
587+
},
588+
{
589+
firstName: 'Danni',
590+
lastName: 'Yu',
591+
gender: 'Female',
592+
date: '1990/01/14',
593+
},
594+
]);
595+
596+
return { dataSource };
514597
},
515598
});
516599
</script>
@@ -520,23 +603,23 @@ export default defineComponent({
520603

521604
### 固定列
522605

523-
:::demo
606+
:::demo 当表格列过多时，固定列有利于用户在左右滑动时，能够便捷的进行数据定位与对比，通过`fixed-left`和`fixed-right`来配置。
524607

525608
```vue
526609
<template>
527610
<div>
528611
<d-button @click="handleClick">更新数据</d-button>
529-
<d-table :data="emptyData" :scrollable="true">
530-
<d-column field="firstName" header="First Name" :order="2" :minWidth="100"></d-column>
531-
<d-column field="lastName" header="Last Name" :order="3"></d-column>
532-
<d-column field="gender" header="Gender" :order="5"></d-column>
533-
<d-column field="date" header="Date of birth" :order="4"></d-column>
534-
<d-column field="address" header="Address" :order="6"></d-column>
535-
<d-column field="occupation" header="Occupation" :order="7"></d-column>
536-
<d-column field="occupation" header="Occupation" :order="7"></d-column>
537-
<d-column field="occupation" header="Occupation" :order="7"></d-column>
538-
<d-column field="occupation" header="Occupation" :order="7" fixedRight="0px"></d-column>
539-
<d-column field="idNo" header="ID Card Number" :order="1"></d-column>
612+
<d-table :data="emptyData" table-layout="auto">
613+
<d-column field="idNo" header="ID Card Number" fixed-left="0px"></d-column>
614+
<d-column field="firstName" header="First Name"></d-column>
615+
<d-column field="lastName" header="Last Name"></d-column>
616+
<d-column field="gender" header="Gender"></d-column>
617+
<d-column field="date" header="Date of birth"></d-column>
618+
<d-column field="address" header="Address"></d-column>
619+
<d-column field="occupation" header="Occupation"></d-column>
620+
<d-column field="occupation" header="Occupation"></d-column>
621+
<d-column field="occupation" header="Occupation"></d-column>
622+
<d-column field="occupation" header="Occupation" fixed-right="0px"></d-column>
540623
</d-table>
541624
</div>
542625
</template>
@@ -609,7 +692,7 @@ export default defineComponent({
609692

610693
```vue
611694
<template>
612-
<d-table :data="baseTableData" :span-method="spanMethod" border-type="bordered">
695+
<d-table :data="dataSource" :span-method="spanMethod" border-type="bordered">
613696
<d-column field="firstName" header="First Name"></d-column>
614697
<d-column field="lastName" header="Last Name"></d-column>
615698
<d-column field="gender" header="Gender"></d-column>
@@ -622,7 +705,7 @@ import { defineComponent, ref } from 'vue';
622705
623706
export default defineComponent({
624707
setup() {
625-
const baseTableData = ref([
708+
const dataSource = ref([
626709
{
627710
firstName: 'Mark',
628711
lastName: 'Otto',
@@ -660,7 +743,7 @@ export default defineComponent({
660743
}
661744
};
662745
663-
return { baseTableData, spanMethod };
746+
return { dataSource, spanMethod };
664747
},
665748
});
666749
</script>
@@ -670,11 +753,11 @@ export default defineComponent({
670753

671754
### 表头分组
672755

673-
:::demo
756+
:::demo `d-column`嵌套`d-column`即可实现表头分组。
674757

675758
```vue
676759
<template>
677-
<d-table :data="baseTableData" border-type="bordered">
760+
<d-table :data="dataSource" border-type="bordered" header-bg>
678761
<d-column field="name" header="Name">
679762
<d-column field="firstName" header="First Name"></d-column>
680763
<d-column field="lastName" header="Last Name"></d-column>
@@ -689,7 +772,7 @@ import { defineComponent, ref } from 'vue';
689772
690773
export default defineComponent({
691774
setup() {
692-
const baseTableData = ref([
775+
const dataSource = ref([
693776
{
694777
firstName: 'Mark',
695778
lastName: 'Otto',
@@ -716,7 +799,7 @@ export default defineComponent({
716799
},
717800
]);
718801
719-
return { baseTableData };
802+
return { dataSource };
720803
},
721804
});
722805
</script>
@@ -736,8 +819,8 @@ export default defineComponent({
736819
| table-width | `string` | -- | 可选，表格宽度 |
737820
| table-height | `string` | -- | 可选，表格高度 |
738821
| row-hovered-highlight | `boolean` | true | 可选，鼠标在该行上时，高亮该行 | [表格样式](#表格样式) |
739-
| fix-header | `boolean` | false | 可选，固定头部 |
740-
| show-loading | `boolean` | false | 可选，显示加载动画 |
822+
| fix-header | `boolean` | false | 可选，固定头部 | [固定表头](#固定表头) |
823+
| show-loading | `boolean` | false | 可选，显示加载动画 | [空数据模板](#空数据模板) |
741824
| header-bg | `boolean` | false | 可选，头部背景 | [表格样式](#表格样式) |
742825
| table-layout | `'fixed' \| 'auto'` | 'fixed' | 可选，表格布局，可选值为'auto' | [表格样式](#表格样式) |
743826
| span-method | `SpanMethod` | -- | 可选，合并单元格的计算方法 | [合并单元格](#合并单元格) |
@@ -751,18 +834,18 @@ export default defineComponent({
751834

752835
### d-column 参数
753836

754-
| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |
755-
| :--------- | :--------------------------------------- | :----------------------------------- | :------------------------------------------ | :-------------------- |
756-
| header | `string` | -- | 对应列的标题 | [基本用法](#基本用法) |
757-
| field | `string` | -- | 对应列内容的字段名 | [基本用法](#基本用法) |
758-
| type | `ColumnType` | '' | 可选，列的类型，设置`checkable`会显示多选框 | [表格多选](#表格多选) |
759-
| width | `string \| number` | -- | 可选，对应列的宽度，单位`px` |
760-
| min-width | `string \| number` | -- | 可选，对应列的最小宽度，单位`px` |
761-
| sortable | `boolean` | false | 可选，对行数据按照该列的顺序进行排序 |
762-
| fixedLeft | `string` | -- | 可选，该列固定到左侧的距离，如：'100px' | [固定列](#固定列) |
763-
| fixedRight | `string` | -- | 可选，该列固定到右侧的距离，如：'100px' | [固定列](#固定列) |
764-
| formatter | `Function` | -- | 可选，对应列的所有单元格的格式 |
765-
| compareFn | `(field: string, a: T, b: T) => boolean` | (field, a, b) => a[field] > b[field] | 可选，用于排序的比较函数 |
837+
| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |
838+
| :--------- | :----------------- | :----------------------------------- | :------------------------------------------ | :-------------------- |
839+
| header | `string` | -- | 可选，对应列的标题 | [基本用法](#基本用法) |
840+
| field | `string` | -- | 可选，对应列内容的字段名 | [基本用法](#基本用法) |
841+
| type | `ColumnType` | '' | 可选，列的类型，设置`checkable`会显示多选框 | [表格多选](#表格多选) |
842+
| width | `string \| number` | -- | 可选，对应列的宽度，单位`px` |
843+
| min-width | `string \| number` | -- | 可选，对应列的最小宽度，单位`px` |
844+
| sortable | `boolean` | false | 可选，对行数据按照该列的顺序进行排序 |
845+
| fixedLeft | `string` | -- | 可选，该列固定到左侧的距离，如：'100px' | [固定列](#固定列) |
846+
| fixedRight | `string` | -- | 可选，该列固定到右侧的距离，如：'100px' | [固定列](#固定列) |
847+
| formatter | `Formatter` | -- | 可选，格式化列内容 |
848+
| compareFn | `CompareFn` | (field, a, b) => a[field] > b[field] | 可选，用于排序的比较函数 |
766849

767850
### d-column 插槽
768851

@@ -801,3 +884,15 @@ type BorderType = '' | 'bordered' | 'borderless';
801884
```ts
802885
type ColumnType = 'checkable' | '';
803886
```
887+
888+
#### Formatter
889+
890+
```ts
891+
type Formatter = (row: any, column: any, cellValue: any, rowIndex: number) => VNode;
892+
```
893+
894+
#### CompareFn
895+
896+
```ts
897+
type CompareFn<T = any> = (field: string, a: T, b: T) => boolean;
898+
```

0 commit comments

Comments
 (0)