Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 937852c

Browse files
coderrorerdennis.zpf
coderrorer
and
dennis.zpf
authoredJan 7, 2025··
Feat/table ellipse (#1359)
* fix: temp * fix: 删除无用代码 * feat: table组件支持多行省略配置 & tabs bar增加一个类配置 * fix: 还原文件格式 * fix: 格式优化 * fix: 触发flouer page --------- Co-authored-by: dennis.zpf <dennis.zpf@antgroup.com>
1 parent 6832e64 commit 937852c

File tree

11 files changed

+130
-38
lines changed

11 files changed

+130
-38
lines changed
 

‎demo/pages/Table/index.axml

+7
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,10 @@
5656
>
5757
<ant-table dataSource="{{dataSource}}" columns="{{fullColumns}}" displayType="FULL" className='full-table-table' />
5858
</ant-container>
59+
60+
<ant-container
61+
title="超出行数省略展示"
62+
className="list"
63+
>
64+
<ant-table dataSource="{{[{key: '0', name: '这是一行很长的数据，需要换行展示blablablabla', age: 18, sex: '男', address: '成都'}]}}" columns="{{fullColumns}}" className='full-table-table' />
65+
</ant-container>

‎demo/pages/Table/index.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const nameArr = [
2-
'小明',
2+
'小红',
33
'小何',
44
'小花',
55
'小美',
@@ -43,6 +43,7 @@ Page({
4343
key: 'name',
4444
width: 150,
4545
fixed: true,
46+
ellipsisRow: 2,
4647
},
4748
{
4849
title: '年龄',
@@ -87,6 +88,8 @@ Page({
8788
title: '姓名',
8889
dataIndex: 'name',
8990
key: 'name',
91+
ellipsisRow: 2,
92+
width: 400,
9093
},
9194
{
9295
title: '年龄',

‎src/Table/index.axml

+55-19
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,63 @@
1-
<view class="ant-table {{ scrollHeight ? 'ant-table-scroll-height' : '' }} {{className}}" onTouchMove="handleTouchMove" onScrollToUpper="handleScrollToUpper">
1+
<view
2+
class="ant-table {{ scrollHeight ? 'ant-table-scroll-height' : '' }} {{className}}"
3+
onTouchMove="handleTouchMove"
4+
onScrollToUpper="handleScrollToUpper"
5+
>
26
<view class="ant-table-content" style="{{widthPx?`width: ${widthPx}px;`:''}} {{ scrollHeight ? `height: ${scrollHeight};` : '' }}">
37
<view class="ant-table-list">
48
<block a:for="{{list}}" key="{{item.key}}">
59
<!-- displayType-full 设置一行铺满展示 ant-table-list-item-{{item.type}} -->
6-
<view class="ant-table-list-item {{displayType==='FULL'?'ant-table-list-item-full':''}}" style="{{ item.type === 'columns' && scrollHeight ? 'position: sticky; top: 0; z-index: 10;' : '' }}">
7-
<block a:for="{{item.value}}" a:for-item="val" key="{{val.key}}" a:for-index="itemIndex">
8-
<view class="ant-table-list-item-columns-item {{val.fixed ? `ant-table-list-item-value-fixed ${showFixedShadow ? 'ant-table-list-item-value-shadow' : ''}` : ''}}"
9-
style="width:{{displayType==='FULL'?`${100/item.value.length}%;`:`${val.widthPx}px;`}} ">
10+
<view
11+
class="ant-table-list-item {{displayType==='FULL'?'ant-table-list-item-full':''}}"
12+
style="{{ item.type === 'columns' && scrollHeight ? 'position: sticky; top: 0; z-index: 10;' : '' }}"
13+
>
14+
<block
15+
a:for="{{item.value}}"
16+
a:for-index="itemIndex"
17+
a:for-item="val"
18+
key="{{val.key}}"
19+
>
20+
<view
21+
class="ant-table-list-item-columns-item {{val.fixed ? `ant-table-list-item-value-fixed ${showFixedShadow ? 'ant-table-list-item-value-shadow' : ''}` : ''}}"
22+
style="width:{{displayType==='FULL'?`${100/item.value.length}%;`:`${val.widthPx}px;`}} "
23+
>
1024
<view a:if="{{item.type === 'columns'}}" class="ant-table-list-item-columns ant-table-list-item-value {{ val.textAlignRight ? 'ant-table-list-item-value-align-right' : '' }}">
1125
{{val.title}}
12-
<view a:if="{{val.sorter}}" data-item="{{val}}" onTap="handleSort" class="ant-table-list-item-sorter">
13-
<image class="ant-table-list-item-sorter-icon" src="{{val.sorterStatus === 'forward' ? 'https://mdn.alipayobjects.com/huamei_mvxdgg/afts/img/A*q71qTY02S-AAAAAAAAAAAAAADv57AQ/original' : 'https://mdn.alipayobjects.com/huamei_mvxdgg/afts/img/A*42gLQbKpi30AAAAAAAAAAAAADv57AQ/original'}}" />
14-
<image class="ant-table-list-item-sorter-icon" src="{{val.sorterStatus === 'reverse' ? 'https://mdn.alipayobjects.com/huamei_mvxdgg/afts/img/A*Co9CQ61uhPAAAAAAAAAAAAAADv57AQ/original' : 'https://mdn.alipayobjects.com/huamei_mvxdgg/afts/img/A*h9ZcSLzVBjgAAAAAAAAAAAAADv57AQ/original'}}" />
26+
<view
27+
a:if="{{val.sorter}}"
28+
data-item="{{val}}"
29+
onTap="handleSort"
30+
class="ant-table-list-item-sorter"
31+
>
32+
<image
33+
class="ant-table-list-item-sorter-icon"
34+
src="{{val.sorterStatus === 'forward' ? 'https://mdn.alipayobjects.com/huamei_mvxdgg/afts/img/A*q71qTY02S-AAAAAAAAAAAAAADv57AQ/original' : 'https://mdn.alipayobjects.com/huamei_mvxdgg/afts/img/A*42gLQbKpi30AAAAAAAAAAAAADv57AQ/original'}}"
35+
/>
36+
<image
37+
class="ant-table-list-item-sorter-icon"
38+
src="{{val.sorterStatus === 'reverse' ? 'https://mdn.alipayobjects.com/huamei_mvxdgg/afts/img/A*Co9CQ61uhPAAAAAAAAAAAAAADv57AQ/original' : 'https://mdn.alipayobjects.com/huamei_mvxdgg/afts/img/A*h9ZcSLzVBjgAAAAAAAAAAAAADv57AQ/original'}}"
39+
/>
1540
</view>
1641
</view>
17-
<view a:else class="ant-table-list-item-rows ant-table-list-item-value {{itemIndex==0?'ant-table-list-item-value-first':''}} {{ val.textAlignRight ? 'ant-table-list-item-value-align-right' : '' }}">
18-
<!-- #if ALIPAY -->
19-
<slot item="{{val}}" index="{{itemIndex}}" row="{{item}}" rowIndex="{{index}}" name="item">
20-
<!-- #endif -->
21-
{{val.value}}
22-
<!-- #if ALIPAY -->
23-
</slot>
24-
<!-- #endif -->
42+
<view
43+
a:else
44+
class="ant-table-list-item-rows ant-table-list-item-value {{itemIndex==0?'ant-table-list-item-value-first':''}} {{ val.textAlignRight ? 'ant-table-list-item-value-align-right' : '' }}"
45+
>
46+
<view class="{{val.ellipsisRow ? 'ant-table-list-item-ellipsis' : ''}}" style="{{val.ellipsisRow ? `-webkit-line-clamp:${val.ellipsisRow}`: ''}}">
47+
<!-- #if ALIPAY -->
48+
<slot
49+
item="{{val}}"
50+
index="{{itemIndex}}"
51+
row="{{item}}"
52+
rowIndex="{{index}}"
53+
name="item"
54+
>
55+
<!-- #endif -->
56+
{{val.value}}
57+
<!-- #if ALIPAY -->
58+
</slot>
59+
<!-- #endif -->
60+
</view>
2561
</view>
2662
</view>
2763
</block>
@@ -33,11 +69,11 @@
3369
<view a:if="{{list.length <= 1}}" class="ant-table-empty">
3470
<!-- #if ALIPAY -->
3571
<slot item="{{val}}" name="empty">
36-
<!-- #endif -->
72+
<!-- #endif -->
3773
<image class="ant-table-empty-image" src="https://mdn.alipayobjects.com/huamei_9iifqq/afts/img/A*AWeXQYuIODwAAAAAAAAAAAAADjWYAQ/original" />
38-
<!-- #if ALIPAY -->
74+
<!-- #if ALIPAY -->
3975
</slot>
4076
<!-- #endif -->
4177
</view>
4278
</view>
43-
</view>
79+
</view>

‎src/Table/index.en.md

+20-8
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,16 @@ Page({
139139
</ant-table>
140140
```
141141

142+
### Beyond line break display
143+
You can use the ```ellipsisRow``` in the column configuration parameters to control whether to wrap lines and how many lines are finally displayed, beyond the ellipsis.
144+
145+
```xml
146+
<ant-table
147+
dataSource="{{[{key: '0', name: '这是一行很长的数据，需要换行展示blablablabla', age: 18, sex: '男', address: '成都'}]}}"
148+
columns="{{fullColumns}}"
149+
/>
150+
```
151+
142152
### Demo Code
143153

144154
<code src="../../demo/pages/Table/index"></code>
@@ -155,14 +165,16 @@ Page({
155165

156166
### Column
157167

158-
| Property | Description | Type | Default Value |
159-
| -------------- | ---------------- | ------- | ------ |
160-
| title | Column Header | string | - |
161-
| dataIndex | Column Value Field | string | - |
162-
| key | Column Unique Identifier | string | - |
163-
| width | Column Width | number | - |
164-
| fixed | Fixed column | boolean | - |
165-
| textAlignRight | Whether column text is right-justified | boolean | - |
168+
| Property | Description | Type | Default Value |
169+
| -------------- | ---------------------------- | ------- | ------ |
170+
| title | Column Header | string | - |
171+
| dataIndex | Column Value Field | string | - |
172+
| key | Column Unique Identifier | string | - |
173+
| width | Column Width | number | - |
174+
| fixed | Fixed column | boolean | - |
175+
| textAlignRight | Whether column text is right-justified | boolean | - |
176+
| ellipsisRow | The maximum number of rows displayed in a cell, which exceeds omission. | number | - |
177+
166178

167179
## Slot
168180

‎src/Table/index.less

+9
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
text-align: left;
6565
box-sizing: border-box;
6666

67+
6768
&-align-right {
6869
justify-content: flex-end;
6970
}
@@ -89,6 +90,14 @@
8990
}
9091
}
9192
}
93+
94+
&-ellipsis {
95+
overflow: hidden;
96+
text-overflow: ellipsis;
97+
-webkit-box-orient: vertical;
98+
display: -webkit-box;
99+
white-space: wrap;
100+
}
92101
}
93102
}
94103

‎src/Table/index.md

+20-8
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,16 @@ Page({
139139
</ant-table>
140140
```
141141

142+
### 超出换行展示
143+
可以使用列配置参数里的```ellipsisRow```控制是否换行以及最终展示多少行，超出以省略号展示
144+
145+
```xml
146+
<ant-table
147+
dataSource="{{[{key: '0', name: '这是一行很长的数据，需要换行展示blablablabla', age: 18, sex: '男', address: '成都'}]}}"
148+
columns="{{fullColumns}}"
149+
/>
150+
```
151+
142152
### Demo 代码
143153

144154
<code src="../../demo/pages/Table/index"></code>
@@ -155,14 +165,16 @@ Page({
155165

156166
### Column
157167

158-
| 属性 | 说明 | 类型 | 默认值 |
159-
| -------------- | ---------------- | ------- | ------ |
160-
| title | 列标题 | string | - |
161-
| dataIndex | 列取值字段 | string | - |
162-
| key | 列唯一标识 | string | - |
163-
| width | 列宽度 | number | - |
164-
| fixed | 是否固定列 | boolean | - |
165-
| textAlignRight | 列文本是否右对齐 | boolean | - |
168+
| 属性 | 说明 | 类型 | 默认值 |
169+
| -------------- | ---------------------------- | ------- | ------ |
170+
| title | 列标题 | string | - |
171+
| dataIndex | 列取值字段 | string | - |
172+
| key | 列唯一标识 | string | - |
173+
| width | 列宽度 | number | - |
174+
| fixed | 是否固定列 | boolean | - |
175+
| textAlignRight | 列文本是否右对齐 | boolean | - |
176+
| ellipsisRow | 单元格最大展示行数，超出省略 | number | - |
177+
166178

167179
## 插槽
168180

‎src/Table/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ Component(
7171
rowsData: v,
7272
widthPx: rpx2px(val.width || defaultWidth, windowWidth),
7373
fixed: val.fixed,
74+
ellipsisRow: val.ellipsisRow,
7475
})),
7576
};
7677
});

‎src/Tabs/index.axml

+2-2
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
a:for-item="item">
4444
<view
4545
id="ant-tabs-bar-item{{ $id ? '-' + $id : '' }}-{{ index }}"
46-
class="ant-tabs-bar-wrap ant-tabs-bar-wrap-{{ type }} {{ tabsBarClassName ? tabsBarClassName : '' }}">
46+
class="ant-tabs-bar-wrap ant-tabs-bar-wrap-{{ type }} {{ tabsBarClassName ? tabsBarClassName : '' }} {{tabsBarWrapClassName ? tabsBarWrapClassName : ''}}">
4747
<view
4848
a:if="{{ type === 'basic' }}"
4949
class="ant-tabs-bar-item ant-tabs-bar-basic {{ tabClassName ? tabClassName : '' }} {{ mixin.value === index && !item.disabled ? 'ant-tabs-bar-active' : '' }} {{ item.disabled ? 'ant-tabs-bar-disabled' : '' }} {{ mixin.value === index && !item.disabled && tabActiveClassName ? tabActiveClassName : '' }}"
@@ -188,4 +188,4 @@
188188
</slot>
189189
<!-- #endif -->
190190
</view>
191-
</view>
191+
</view>

‎src/Tabs/index.en.md

+1
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,7 @@ Page({
267267
| style | Style | string | - |
268268
| tabsBarClassName | tabs bar class name | string | - |
269269
| tabClassName | tab class name | string | - |
270+
| tabsBarWrapClassName | tab wrap class | string | - |
270271
| tabActiveClassName | tab active class name | string | - |
271272
| title | Custom `Items` Title;<br /> `slot-scope` Include `value`(corresponding `Item`) `index`(corresponding `Item` index of) | slot | - |
272273
| type | Type,`basic`(basis),`capsule`(capsule),`mixin`(Mixed) | string | `basic` |

‎src/Tabs/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,7 @@ Page({
267267
| style | 样式 | string | - |
268268
| tabsBarClassName | tabs bar 类名 | string | - |
269269
| tabClassName | tab 类名 | string | - |
270+
| tabsBarWrapClassName | tab wrap 类名 | string | - |
270271
| tabActiveClassName | tab active 类名 | string | - |
271272
| title | 自定义 `Items` 标题；<br /> `slot-scope` 包括 `value`(对应 `Item`) `index`(对应 `Item` 的索引) | slot | - |
272273
| type | 类型，`basic`(基础)，`capsule`(胶囊)，`mixin`(混合) | string | `basic` |

‎src/Tabs/props.ts

+10
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,15 @@ export interface ITabsProps extends IBaseProps {
4646
* @description tabs bar类名
4747
*/
4848
tabsBarClassName?: string;
49+
50+
/**
51+
* @description tab bar wrap类名
52+
*/
53+
tabsBarWrapClassName?: string;
54+
55+
/**
56+
* @description tab 类名
57+
*/
4958
/**
5059
* @description tab类名
5160
*/
@@ -65,6 +74,7 @@ export const TabsDefaultProps: Partial<ITabsProps> = {
6574
items: [],
6675
scrollMode: 'edge',
6776
tabsBarClassName: '',
77+
tabsBarWrapClassName: '',
6878
tabActiveClassName: '',
6979
tabClassName: '',
7080
};

0 commit comments

Comments
 (0)
Please sign in to comment.