Skip to content

Commit 61bc2b9

Browse files
anlyyaoanlyyao
committed
fix: fix cr
1 parent 36c3a4d commit 61bc2b9

13 files changed

Lines changed: 184 additions & 34 deletions

File tree

‎packages/components/table/README.en-US.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@ columns | Array | [] | table column configs。Typescript: `Array<BaseTableCol<T>
1414
data | Array | [] | table data。Typescript: `Array<T>` | N
1515
empty | String | '' | empty text or empty element | N
1616
fixed-rows | Array | - | Typescript: `Array<number>` | N
17+
footer-summary | String | - | footer summary content | N
1718
height | String / Number | - | table height | N
1819
loading | Boolean | undefined | loading state table | N
1920
loading-props | Object | - | Typescript: `Partial<LoadingProps>`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
2021
max-height | String / Number | - | table max height | N
2122
row-key | String | 'id' | required。unique key for each row data | Y
23+
rowspan-and-colspan | Function | - | rowspan and colspan。Typescript: `TableRowspanAndColspanFunc<T>` `type TableRowspanAndColspanFunc<T> = (params: BaseTableCellParams<T>) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
2224
show-header | Boolean | true | show table header | N
2325
stripe | Boolean | false | show stripe style | N
2426
table-content-width | String | - | \- | N
@@ -38,14 +40,15 @@ name | Description
3840
-- | --
3941
cell-empty-content | \-
4042
empty | empty text or empty element
43+
footer-summary | footer summary content
4144
loading | loading state table
4245

4346
### BaseTableCol
4447

4548
name | type | default | description | required
4649
-- | -- | -- | -- | --
4750
align | String | left | align type。options: left/right/center | N
48-
cell | String / Function | - | use cell to render table cell。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
51+
cell | String / Function | - | use cell to render table cell。Typescript: `string \| ((params: BaseTableCellParams<T>) => string)` `interface BaseTableCellParams<T> { row: T; rowIndex: number; col: BaseTableCol<T>; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
4952
class-name | String / Object / Array / Function | - | cell classnames。Typescript: `TableColumnClassName<T> \| TableColumnClassName<T>[]` `type TableColumnClassName<T> = ClassName \| ((context: CellData<T>) => ClassName)` `interface CellData<T> extends BaseTableCellParams<T> { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
5053
col-key | String | - | unique key for column | N
5154
fixed | String | left | fixed current column to left or right。options: left/right | N

‎packages/components/table/README.md‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,45 @@
1-
:: BASE_DOC ::
1+
---
2+
title: Table 表格
3+
description: 表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。
4+
spline: data
5+
isComponent: true
6+
toc: false
7+
---
8+
9+
## 引入
10+
11+
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
12+
13+
```json
14+
"usingComponents": {
15+
"t-table": "tdesign-miniprogram/table/table"
16+
}
17+
```
18+
19+
## 代码演示
20+
21+
### 组件类型
22+
23+
#### 基础表格
24+
25+
{{ base }}
26+
27+
#### 横向平铺可滚动表格
28+
29+
{{ scroll }}
30+
31+
#### 带斑马纹表格样式
32+
33+
{{ stripe }}
34+
35+
#### 带边框表格样式
36+
37+
{{ bordered }}
38+
39+
#### 带合并单元格的表格
40+
41+
{{ rowspan-colspan }}
42+
243

344
## API
445

@@ -14,11 +55,13 @@ columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：
1455
data | Array | [] | 数据源，泛型 T 指表格数据类型。TS 类型：`Array<T>` | N
1556
empty | String | '' | 空表格呈现样式，支持全局配置 `GlobalConfigProvider` | N
1657
fixed-rows | Array | - | 固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行。TS 类型：`Array<number>` | N
58+
footer-summary | String | - | 表尾总结行 | N
1759
height | String / Number | - | 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N
1860
loading | Boolean | undefined | 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态 | N
1961
loading-props | Object | - | 透传加载组件全部属性。TS 类型：`Partial<LoadingProps>`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
2062
max-height | String / Number | - | 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px | N
2163
row-key | String | 'id' | 必需。唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法 | Y
64+
rowspan-and-colspan | Function | - | 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型：`TableRowspanAndColspanFunc<T>` `type TableRowspanAndColspanFunc<T> = (params: BaseTableCellParams<T>) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
2265
show-header | Boolean | true | 是否显示表头 | N
2366
stripe | Boolean | false | 是否显示斑马纹 | N
2467
table-content-width | String | - | 表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度 | N
@@ -38,14 +81,15 @@ row-click | `(context: RowEventContext<T>)` | 行点击时触发，泛型 T 指
3881
-- | --
3982
cell-empty-content | 自定义 `cell-empty-content` 显示内容
4083
empty | 自定义 `empty` 显示内容
84+
footer-summary | 自定义 `footer-summary` 显示内容
4185
loading | 自定义 `loading` 显示内容
4286

4387
### BaseTableCol
4488

4589
名称 | 类型 | 默认值 | 描述 | 必传
4690
-- | -- | -- | -- | --
4791
align | String | left | 列横向对齐方式。可选项：left/right/center | N
48-
cell | String / Function | - | 自定义单元格渲染。默认使用 `colKey` 的值作为自定义当前列的插槽名称。<br/>如果 `cell` 值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染，插槽名称为 cell 的值。优先级高于 `render`。泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
92+
cell | String / Function | - | 自定义单元格渲染。默认使用 `colKey` 的值作为自定义当前列的插槽名称。<br/>如果 `cell` 值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染，插槽名称为 cell 的值。优先级高于 `render`。泛型 T 指表格数据类型。TS 类型：`string \| ((params: BaseTableCellParams<T>) => string)` `interface BaseTableCellParams<T> { row: T; rowIndex: number; col: BaseTableCol<T>; colIndex: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
4993
class-name | String / Object / Array / Function | - | 列类名，值类型是 Function 使用返回值作为列类名；值类型不为 Function 时，值用于整列类名（含表头）。泛型 T 指表格数据类型。TS 类型：`TableColumnClassName<T> \| TableColumnClassName<T>[]` `type TableColumnClassName<T> = ClassName \| ((context: CellData<T>) => ClassName)` `interface CellData<T> extends BaseTableCellParams<T> { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
5094
col-key | String | - | 渲染列所需字段，值为 `serial-number` 表示当前列为「序号」列 | N
5195
fixed | String | left | 固定列显示位置。可选项：left/right | N

‎packages/components/table/_example/table.wxml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@
55
desc="表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。"
66
notice="渲染框架支持情况：WebView"
77
/>
8-
<t-demo title="01 组件类型" desc="基础表格">
8+
<t-demo title="01 组件类型" desc="基础表格" padding>
99
<base />
1010
</t-demo>
11-
<t-demo desc="横向平铺可滚动表格">
11+
<t-demo desc="横向平铺可滚动表格" padding>
1212
<scroll />
1313
</t-demo>
14-
<t-demo desc="带斑马纹表格">
14+
<t-demo desc="带斑马纹表格" padding>
1515
<stripe />
1616
</t-demo>
17-
<t-demo desc="带边框表格">
17+
<t-demo desc="带边框表格" padding>
1818
<bordered />
1919
</t-demo>
20-
<t-demo desc="带合并单元格的表格">
20+
<t-demo desc="带合并单元格的表格" padding>
2121
<rowspan-colspan />
2222
</t-demo>
2323
</view>

‎packages/components/table/base-table-props.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ const props: TdBaseTableProps = {
3434
fixedRows: {
3535
type: Array,
3636
},
37+
/** 表尾总结行 */
38+
footerSummary: {
39+
type: String,
40+
},
3741
/** 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` */
3842
height: {
3943
type: null,
@@ -57,6 +61,10 @@ const props: TdBaseTableProps = {
5761
value: 'id',
5862
required: true,
5963
},
64+
/** 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }` */
65+
rowspanAndColspan: {
66+
type: null,
67+
},
6068
/** 是否显示表头 */
6169
showHeader: {
6270
type: Boolean,

‎packages/components/table/table.less‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@
1212
@table-th-padding: var(--td-table-th-padding, 16rpx 24rpx);
1313
@table-font-size: var(--td-table-font-size, @font-body-medium);
1414
@table-loading-bg-color: var(--td-table-loading-bg-color, rgba(255, 255, 255, 0.55));
15-
@table-row-height: var(--td-table-row-height, 41px);
15+
@table-row-height: var(--td-table-row-height, 82rpx);
1616
@scrollbar-color: rgba(0, 0, 0, 10%);
1717
@scrollbar-hover-color: rgba(0, 0, 0, 30%);
1818

1919
// 固定列相关变量
2020
@table-fixed-column-z-index: 30;
2121
@table-fixed-cell-border-color: var(--td-table-fixed-cell-border-color, @component-border);
22-
@table-fixed-cell-border-width: 4px;
23-
@table-fixed-cell-border-width-light: 2px;
22+
@table-fixed-cell-border-width: 8rpx;
23+
@table-fixed-cell-border-width-light: 4rpx;
2424
@table-fixed-cell-border: @table-fixed-cell-border-width solid @table-fixed-cell-border-color;
2525
@table-fixed-cell-border-light: @table-fixed-cell-border-width-light solid @table-fixed-cell-border-color;
2626

@@ -40,15 +40,15 @@
4040
// scroll-view 在 H5 端内部会生成子滚动容器，需要同时匹配自身和后代元素
4141
&::-webkit-scrollbar,
4242
& ::-webkit-scrollbar {
43-
width: 6px;
44-
height: 6px;
43+
width: 12rpx;
44+
height: 12rpx;
4545
}
4646

4747
&::-webkit-scrollbar-thumb,
4848
& ::-webkit-scrollbar-thumb {
4949
background-clip: content-box;
5050
background-color: @scrollbar-color;
51-
border-radius: 11px;
51+
border-radius: 22rpx;
5252
}
5353

5454
&::-webkit-scrollbar-thumb:vertical:hover,
@@ -83,7 +83,7 @@
8383
box-sizing: border-box;
8484
overflow: hidden;
8585
min-width: 0;
86-
border-bottom: 1px solid @table-border-color;
86+
border-bottom: 2rpx solid @table-border-color;
8787
}
8888

8989
&__th {
@@ -132,7 +132,7 @@
132132
&__bottom-content {
133133
padding: 16rpx 24rpx;
134134
background-color: @bg-color-container;
135-
border-top: 1px solid @table-border-color;
135+
border-top: 2rpx solid @table-border-color;
136136
}
137137

138138
// 加载中
@@ -177,19 +177,19 @@
177177

178178
// 边框
179179
&--bordered {
180-
border: 1px solid @table-border-color;
180+
border: 2rpx solid @table-border-color;
181181

182182
.@{table-prefix}__th,
183183
.@{table-prefix}__td {
184-
border-right: 1px solid @table-border-color;
184+
border-right: 2rpx solid @table-border-color;
185185

186186
&:last-child {
187187
border-right: none;
188188
}
189189
}
190190

191191
.@{table-prefix}__th {
192-
border-bottom: 1px solid @table-border-color;
192+
border-bottom: 2rpx solid @table-border-color;
193193
}
194194
}
195195

@@ -293,7 +293,7 @@
293293

294294
// 固定底部行的第一行加上边框
295295
&__row--fixed-bottom-first > .@{table-prefix}__td {
296-
border-top: 1px solid @table-border-color;
296+
border-top: 2rpx solid @table-border-color;
297297
}
298298

299299
// 冻结表尾行时，最后一行非冻结行去除下边框

‎packages/components/table/type.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,13 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
5454
type: ArrayConstructor;
5555
value?: Array<number>;
5656
};
57+
/**
58+
* 表尾总结行
59+
*/
60+
footerSummary?: {
61+
type: StringConstructor;
62+
value?: string;
63+
};
5764
/**
5865
* 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight`
5966
*/
@@ -91,6 +98,13 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
9198
value?: string;
9299
required?: boolean;
93100
};
101+
/**
102+
* 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`
103+
*/
104+
rowspanAndColspan?: {
105+
type: undefined;
106+
value?: TableRowspanAndColspanFunc<T>;
107+
};
94108
/**
95109
* 是否显示表头
96110
* @default true
@@ -167,6 +181,13 @@ export interface BaseTableCol<T extends TableRowData = TableRowData> {
167181
width?: string | number;
168182
}
169183

184+
export type TableRowspanAndColspanFunc<T> = (params: BaseTableCellParams<T>) => RowspanColspan;
185+
186+
export interface RowspanColspan {
187+
colspan?: number;
188+
rowspan?: number;
189+
}
190+
170191
export interface TableRowData {
171192
[key: string]: any;
172193
children?: TableRowData[];

‎packages/tdesign-miniprogram/example/project.config.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -388,6 +388,12 @@
388388
"query": "",
389389
"scene": null
390390
},
391+
{
392+
"name": "table",
393+
"pathName": "pages/table/table",
394+
"query": "",
395+
"scene": null
396+
},
391397
{
392398
"name": "tabs",
393399
"pathName": "pages/tabs/tabs",

‎packages/tdesign-miniprogram/site/site.config.mjs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -509,6 +509,14 @@ export const docs = [
509509
path: '/miniprogram/components/swiper',
510510
component: () => import('@/swiper/README.md'),
511511
},
512+
{
513+
title: 'Table 表格',
514+
titleEn: 'Table',
515+
name: 'table',
516+
meta: { docType: 'data' },
517+
path: '/miniprogram/components/table',
518+
component: () => import('@/table/README.md'),
519+
},
512520
{
513521
title: 'Tag 标签',
514522
titleEn: 'Tag',

‎packages/uniapp-components/table/README.en-US.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@ columns | Array | [] | table column configs。Typescript: `Array<BaseTableCol<T>
1313
data | Array | [] | table data。Typescript: `Array<T>` | N
1414
empty | String | '' | empty text or empty element | N
1515
fixed-rows | Array | - | Typescript: `Array<number>` | N
16+
footer-summary | String | - | footer summary content | N
1617
height | String / Number | - | table height | N
1718
loading | Boolean | undefined | loading state table | N
1819
loading-props | Object | - | Typescript: `Partial<LoadingProps>`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
1920
max-height | String / Number | - | table max height | N
2021
row-key | String | 'id' | required。unique key for each row data | Y
22+
rowspan-and-colspan | Function | - | rowspan and colspan。Typescript: `TableRowspanAndColspanFunc<T>` `type TableRowspanAndColspanFunc<T> = (params: BaseTableCellParams<T>) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
2123
show-header | Boolean | true | show table header | N
2224
stripe | Boolean | false | show stripe style | N
2325
table-content-width | String | - | \- | N
@@ -37,14 +39,15 @@ name | Description
3739
-- | --
3840
cell-empty-content | \-
3941
empty | empty text or empty element
42+
footer-summary | footer summary content
4043
loading | loading state table
4144

4245
### BaseTableCol
4346

4447
name | type | default | description | required
4548
-- | -- | -- | -- | --
4649
align | String | left | align type。options: left/right/center | N
47-
cell | String / Function | - | use cell to render table cell。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
50+
cell | String / Function | - | use cell to render table cell。Typescript: `string \| ((params: BaseTableCellParams<T>) => string)` `interface BaseTableCellParams<T> { row: T; rowIndex: number; col: BaseTableCol<T>; colIndex: number }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
4851
class-name | String / Object / Array / Function | - | cell classnames。Typescript: `TableColumnClassName<T> \| TableColumnClassName<T>[]` `type TableColumnClassName<T> = ClassName \| ((context: CellData<T>) => ClassName)` `interface CellData<T> extends BaseTableCellParams<T> { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
4952
col-key | String | - | unique key for column | N
5053
fixed | String | left | fixed current column to left or right。options: left/right | N

0 commit comments

Comments
 (0)