Skip to content
This repository was archived by the owner on Jan 5, 2024. It is now read-only.

Commit 8ae8c2e

Browse files
teacher-zhouteacher-zhou
committed
fix: 解决展开收缩列的问题
1 parent 19b8d3b commit 8ae8c2e

8 files changed

Lines changed: 168 additions & 122 deletions

File tree

‎doc/TDesign.Docs.ServerSide/TDesign.xml‎

Lines changed: 13 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎doc/TDesign.Docs.Shared/Pages/Components/Data/TablePage.razor‎

Lines changed: 86 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@page "/components/table"
2-
<LayoutContent AnchorItems="@(new[]{"基础表格","斑马纹表格","边框表格","鼠标悬浮行","固定顶部", "加载状态","自定义表尾的表格","可分页的表格","可选择行的表格","空表格", "API"})">
2+
<LayoutContent AnchorItems="@(new[]{"基础表格","斑马纹表格","边框表格","鼠标悬浮行","固定顶部", "加载状态",
3+
"自定义表尾的表格","可分页的表格","可选择行的表格","可展开行的表格","空表格", "API"})">
34
<PageHeader Title="Table 表格">
45
表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。
56
</PageHeader>
@@ -8,9 +9,9 @@
89
<Description>简单表格，使用边框线、斑马纹等清晰呈现各数据单元格边界线，辅助信息区隔。</Description>
910
<RunContent>
1011
<TTable TItem="User" Data="User.GetData()">
11-
<TTableFieldColumn Value="context?.Id" Header="Id" />
12-
<TTableFieldColumn Value="context?.Name" Header="姓名" />
13-
<TTableFieldColumn Value="context?.Age" Header="年龄" />
12+
<TTableFieldColumn Field="Id" Header="Id" />
13+
<TTableFieldColumn Field="Name" Header="姓名" />
14+
<TTableFieldColumn Field="Age" Header="年龄" />
1415
<TTableFieldColumn Header="性别">
1516
@if (context is not null)
1617
{
@@ -56,9 +57,9 @@
5657
<Description>设置 <code>Striped</code> 让表格具备颜色间隔</Description>
5758
<RunContent>
5859
<TTable TItem="User" Data="User.GetData()" Striped>
59-
<TTableFieldColumn Value="context?.Id" Header="Id" />
60-
<TTableFieldColumn Value="context?.Name" Header="姓名" />
61-
<TTableFieldColumn Value="context?.Age" Header="年龄" />
60+
<TTableFieldColumn Field="Id" Header="Id" />
61+
<TTableFieldColumn Field="Name" Header="姓名" />
62+
<TTableFieldColumn Field="Age" Header="年龄" />
6263
<TTableFieldColumn Header="性别">
6364
@if (context is not null)
6465
{
@@ -104,9 +105,9 @@
104105
<Description>设置 <code>Bordered</code> 让表格每个列都显示边框</Description>
105106
<RunContent>
106107
<TTable TItem="User" Data="User.GetData()" Bordered>
107-
<TTableFieldColumn Value="context?.Id" Header="Id" />
108-
<TTableFieldColumn Value="context?.Name" Header="姓名" />
109-
<TTableFieldColumn Value="context?.Age" Header="年龄" />
108+
<TTableFieldColumn Field="Id" Header="Id" />
109+
<TTableFieldColumn Field="Name" Header="姓名" />
110+
<TTableFieldColumn Field="Age" Header="年龄" />
110111
<TTableFieldColumn Header="性别">
111112
@if (context is not null)
112113
{
@@ -152,9 +153,9 @@
152153
<Description>设置 <code>Hoverable</code> 鼠标悬停行会有颜色高亮</Description>
153154
<RunContent>
154155
<TTable TItem="User" Data="User.GetData()" Hoverable>
155-
<TTableFieldColumn Value="context?.Id" Header="Id" />
156-
<TTableFieldColumn Value="context?.Name" Header="姓名" />
157-
<TTableFieldColumn Value="context?.Age" Header="年龄" />
156+
<TTableFieldColumn Field="Id" Header="Id" />
157+
<TTableFieldColumn Field="Name" Header="姓名" />
158+
<TTableFieldColumn Field="Age" Header="年龄" />
158159
<TTableFieldColumn Header="性别">
159160
@if (context is not null)
160161
{
@@ -200,9 +201,9 @@
200201
<Description>设置 <code>FixedHeader</code> 可以固定顶部列，但同时要设置 <code>FixedHeight</code> 定义内容部分的高度</Description>
201202
<RunContent>
202203
<TTable TItem="User" Data="User.GetData(20)" FixedHeader FixedHeight="200">
203-
<TTableFieldColumn Value="context?.Id" Header="Id" />
204-
<TTableFieldColumn Value="context?.Name" Header="姓名" />
205-
<TTableFieldColumn Value="context?.Age" Header="年龄" />
204+
<TTableFieldColumn Field="Id" Header="Id" />
205+
<TTableFieldColumn Field="Name" Header="姓名" />
206+
<TTableFieldColumn Field="Age" Header="年龄" />
206207
<TTableFieldColumn Header="性别">
207208
@if (context is not null)
208209
{
@@ -247,9 +248,9 @@
247248
<Description>普通加载，会在表格上面显示半透明加载层，表格内容不隐藏。</Description>
248249
<RunContent>
249250
<TTable TItem="User" Data="User.GetData()" Loading>
250-
<TTableFieldColumn Value="context?.Id" Header="Id" />
251-
<TTableFieldColumn Value="context?.Name" Header="姓名" />
252-
<TTableFieldColumn Value="context?.Age" Header="年龄" />
251+
<TTableFieldColumn Field="Id" Header="Id" />
252+
<TTableFieldColumn Field="Name" Header="姓名" />
253+
<TTableFieldColumn Field="Age" Header="年龄" />
253254
<TTableFieldColumn Header="性别">
254255
@if (context is not null)
255256
{
@@ -305,9 +306,9 @@
305306
<h3>自定义通栏底部</h3>
306307
<TTable TItem="User" Data="TablePage.User.GetData(5)">
307308
<ChildContent>
308-
<TTableFieldColumn Value="context?.Id" Header="Id" />
309-
<TTableFieldColumn Value="context?.Name" Header="姓名" />
310-
<TTableFieldColumn Value="context?.Age" Header="年龄" />
309+
<TTableFieldColumn Field="Id" Header="Id" />
310+
<TTableFieldColumn Field="Name" Header="姓名" />
311+
<TTableFieldColumn Field="Age" Header="年龄" />
311312
<TTableFieldColumn Header="性别">
312313
@if ( context is not null )
313314
{
@@ -328,17 +329,17 @@
328329
</TTable>
329330
<h3>自定义列的底部</h3>
330331
<TTable TItem="User" Data="TablePage.User.GetData(5)">
331-
<TTableFieldColumn Value="context?.Id" Header="Id">
332+
<TTableFieldColumn Field="Id" Header="Id">
332333
<FooterContent>
333334
Id
334335
</FooterContent>
335336
</TTableFieldColumn>
336-
<TTableFieldColumn Value="context?.Name" Header="姓名">
337+
<TTableFieldColumn Field="Name" Header="姓名">
337338
<FooterContent>
338339
姓名
339340
</FooterContent>
340341
</TTableFieldColumn>
341-
<TTableFieldColumn Value="context?.Age" Header="年龄">
342+
<TTableFieldColumn Field="Age" Header="年龄">
342343
<FooterContent>
343344
年龄
344345
</FooterContent>
@@ -428,9 +429,9 @@
428429
<RunContent>
429430
<h3>静态数据</h3>
430431
<TTable TItem="User" Data="User.GetData(30)" Pagination>
431-
<TTableFieldColumn Value="context?.Id" Header="Id" />
432-
<TTableFieldColumn Value="context?.Name" Header="姓名" />
433-
<TTableFieldColumn Value="context?.Age" Header="年龄" />
432+
<TTableFieldColumn Field="Id" Header="Id" />
433+
<TTableFieldColumn Field="Name" Header="姓名" />
434+
<TTableFieldColumn Field="Age" Header="年龄" />
434435
<TTableFieldColumn Header="性别">
435436
@if ( context is not null )
436437
{
@@ -447,9 +448,9 @@
447448
</TTable>
448449
<h3>动态数据</h3>
449450
<TTable TItem="User" Data="DataSource<User>.Parse(TablePage.Mock)" Pagination>
450-
<TTableFieldColumn Value="context?.Id" Header="Id" />
451-
<TTableFieldColumn Value="context?.Name" Header="姓名" />
452-
<TTableFieldColumn Value="context?.Age" Header="年龄" />
451+
<TTableFieldColumn Field="Id" Header="Id" />
452+
<TTableFieldColumn Field="Name" Header="姓名" />
453+
<TTableFieldColumn Field="Age" Header="年龄" />
453454
<TTableFieldColumn Header="性别">
454455
@if ( context is not null )
455456
{
@@ -531,10 +532,10 @@ static async Task<(IEnumerable<User> data,int count)> Mock(int take,int skip)
531532
</Description>
532533
<RunContent>
533534
<TTable TItem="User" Data="User.GetData(7)" Hoverable RowSelection OnRowSelected="RowSelected">
534-
<TTableRadioColumn Value="context?.Id" SelectionKey="Id" Header="选择"/>
535-
<TTableFieldColumn Value="context?.Id" Header="Id" />
536-
<TTableFieldColumn Value="context?.Name" Header="姓名" />
537-
<TTableFieldColumn Value="context?.Age" Header="年龄" />
535+
<TTableRadioColumn Field="Id" Header="选择"/>
536+
<TTableFieldColumn Field="Id" Header="Id" />
537+
<TTableFieldColumn Field="Name" Header="姓名" />
538+
<TTableFieldColumn Field="Age" Header="年龄" />
538539
<TTableFieldColumn Header="性别">
539540
@if ( context is not null )
540541
{
@@ -550,10 +551,10 @@ static async Task<(IEnumerable<User> data,int count)> Mock(int take,int skip)
550551
</TTableFieldColumn>
551552
</TTable>
552553
<TTable TItem="User" Data="User.GetData(5)" Hoverable RowSelection OnRowSelected="RowSelected">
553-
<TTableCheckboxColumn Value="context?.Id" SelectionKey="Id" Header="选择"/>
554-
<TTableFieldColumn Value="context?.Id" Header="Id" />
555-
<TTableFieldColumn Value="context?.Name" Header="姓名" />
556-
<TTableFieldColumn Value="context?.Age" Header="年龄" />
554+
<TTableCheckboxColumn Field="Id" SelectionKey="Id" Header="选择"/>
555+
<TTableFieldColumn Field="Id" Header="Id" />
556+
<TTableFieldColumn Field="Name" Header="姓名" />
557+
<TTableFieldColumn Field="Age" Header="年龄" />
557558
<TTableFieldColumn Header="性别">
558559
@if ( context is not null )
559560
{
@@ -616,6 +617,45 @@ static async Task<(IEnumerable<User> data,int count)> Mock(int take,int skip)
616617
async Task RowSelected(TTableRowItemEventArgs<User> e)
617618
=> await JS.InvokeVoidAsync(""alert"", e.Item is null ? ""你什么都没选"" : $""你选择的是：{e.Item?.Name}"");
618619
```
620+
")
621+
</CodeContent>
622+
</Example>
623+
<Example Title="可展开行的表格">
624+
<Description>
625+
使用 <code>&lt;TTableExpandColumn></code> 列可进行展开/收缩功能
626+
</Description>
627+
<RunContent>
628+
<TTable TItem="User" Data="User.GetData(5)">
629+
<TTableExpandColumn Field="Id">
630+
<dl>
631+
<dt>姓名</dt>
632+
<dd>@context?.Name</dd>
633+
<dt>年龄</dt>
634+
<dd>@context?.Age</dd>
635+
</dl>
636+
</TTableExpandColumn>
637+
<TTableFieldColumn Field="Id" Header="Id" />
638+
<TTableFieldColumn Field="Name" Header="姓名" />
639+
<TTableFieldColumn Field="Age" Header="年龄" />
640+
<TTableFieldColumn Header="性别">
641+
@if ( context is not null )
642+
{
643+
if ( context.Gender )
644+
{
645+
<TTag Theme="Theme.Primary">男</TTag>
646+
}
647+
else
648+
{
649+
<TTag Theme="Theme.Danger">女</TTag>
650+
}
651+
}
652+
</TTableFieldColumn>
653+
</TTable>
654+
</RunContent>
655+
<CodeContent>
656+
@Code.Create(@"
657+
```html
658+
```
619659
")
620660
</CodeContent>
621661
</Example>
@@ -624,9 +664,9 @@ async Task RowSelected(TTableRowItemEventArgs<User> e)
624664
<Description>使用默认空表格样式。可使用 <code>EmptyContent</code> 自定义空表格模板</Description>
625665
<RunContent>
626666
<TTable TItem="User" Data="new List<User>()">
627-
<TTableFieldColumn Value="context?.Id" Header="Id" />
628-
<TTableFieldColumn Value="context?.Name" Header="姓名" />
629-
<TTableFieldColumn Value="context?.Age" Header="年龄" />
667+
<TTableFieldColumn Field="Id" Header="Id" />
668+
<TTableFieldColumn Field="Name" Header="姓名" />
669+
<TTableFieldColumn Field="Age" Header="年龄" />
630670
<TTableFieldColumn Header="性别">
631671
@if (context is not null)
632672
{
@@ -644,9 +684,9 @@ async Task RowSelected(TTableRowItemEventArgs<User> e)
644684

645685
<TTable TItem="User" Data="new List<User>()">
646686
<ChildContent>
647-
<TTableFieldColumn Value="context?.Id" Header="Id" />
648-
<TTableFieldColumn Value="context?.Name" Header="姓名" />
649-
<TTableFieldColumn Value="context?.Age" Header="年龄" />
687+
<TTableFieldColumn Field="Id" Header="Id" />
688+
<TTableFieldColumn Field="Name" Header="姓名" />
689+
<TTableFieldColumn Field="Age" Header="年龄" />
650690
<TTableFieldColumn Header="性别">
651691
@if ( context is not null )
652692
{
@@ -721,5 +761,6 @@ async Task RowSelected(TTableRowItemEventArgs<User> e)
721761
<ComponentAPI Component="typeof(TTableFieldColumn<>)" Title="TTableFieldColumn"/>
722762
<ComponentAPI Component="typeof(TTableRadioColumn<>)" Title="TTableRadioColumn" />
723763
<ComponentAPI Component="typeof(TTableCheckboxColumn<>)" Title="TTableCheckboxColumn" />
764+
<ComponentAPI Component="typeof(TTableExpandColumn<>)" Title="TTableExpandColumn" />
724765
</LayoutContent>
725766

‎doc/TDesign.Docs.Shared/Pages/TestPage.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
名字： @context?.Name
88
</TTableExpandColumn>
99
<TTableFieldColumn Field="@nameof(Test.User.Id)" Header="编号" />
10-
<TTableFieldColumn Field="@nameof(Test.User.Name)" Header="姓名" />
10+
<TTableFieldColumn Field="@nameof(Test.User.Name)" />
1111
<TTableFieldColumn Field="@nameof(Test.User.Age)" Header="年龄" />
1212
<TTableFieldColumn Header="性别">
1313
@if (context is not null)

0 commit comments

Comments
 (0)