Skip to content
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

Jump to bottom

fix(table): expanded colspan and fixed expanded icon #255

Merged
merged 4 commits into from
Jan 18, 2022
Merged

fix(table): expanded colspan and fixed expanded icon #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5b848c0
fix(table): expanded colspan and fixed expanded icon
chaishi Jan 17, 2022
eccb1b8
Merge remote-tracking branch 'upstream/develop' into fix_table_expand
chaishi Jan 18, 2022
de34b39
test: update snapshots
chaishi Jan 18, 2022
8478b3d
test: update snapshotz
chaishi Jan 18, 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
26 changes: 23 additions & 3 deletions src/table/primary-table/mixins/expand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,25 @@ export default Vue.extend({
rowKey: baseTableProps.rowKey,
...ExpandProps,
},
data() {
return {
hasExpandedColumn: false,
};
},
computed: {
reRowKey(): string {
return this.rowKey || 'id';
},
columnLength(): number {
let len = this.columns.length;
if (this.hasExpandedColumn) {
len += 1;
}
return len;
},
isFirstColumnFixed(): boolean {
return this.columns[0].fixed === 'left';
},
},
methods: {
getExpandRowHandler(): TdPrimaryTableProps['expandedRow'] {
Expand All @@ -32,7 +47,9 @@ export default Vue.extend({
},
getExpandColumns(columns: Columns): Columns {
const expandRowHandler = this.getExpandRowHandler();
if (!expandRowHandler || !this.expandIcon) return columns;
const hasExpandedColumn = Boolean(expandRowHandler && this.expandIcon);
this.hasExpandedColumn = hasExpandedColumn;
if (!hasExpandedColumn) return columns;
return [
{
colKey: expandedColKey,
Expand All @@ -43,6 +60,7 @@ export default Vue.extend({
overflow: 'auto',
},
},
fixed: this.isFirstColumnFixed ? 'left' : undefined,
cell: (h, { row, rowIndex }) => this.renderExpandIconCell({ row, rowIndex }),
},
...columns,
Expand Down Expand Up @@ -75,8 +93,10 @@ export default Vue.extend({
const isShowExpanded = this.expandedRowKeys.includes(id);
if (isShowExpanded) {
return (
<tr>
<td colspan={this.columns.length}>{renderTNodeJSX(this, 'expandedRow', { params })}</td>
<tr class={`${prefix}-table__expanded-row`}>
<td colspan={this.columnLength} class={`${prefix}-table__row--full`}>
<div class={`${prefix}-table__expanded-row-inner`}>{renderTNodeJSX(this, 'expandedRow', { params })}</div>
</td>
</tr>
);
}
Expand Down
20 changes: 11 additions & 9 deletions test/ssr/__snapshots__/ssr.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10953,15 +10953,17 @@ exports[`ssr snapshot test renders ./examples/table/demos/expandable.vue correct
<td class="" key="description" length="6">test</td>
<td class="" key="op" length="6" style="overflow:hidden;"><a class="link">管理</a> <a class="link">删除</a></td>
</tr>
<tr>
<td colspan="5">
<div class="more-detail">
<p class="title"><b>集群名称:</b></p>
<p class="content">集群测试2</p><br>
<p class="title"><b>管理员:</b></p>
<p class="content">jenny</p><br>
<p class="title"><b>描述:</b></p>
<p class="content">test</p>
<tr class="t-table__expanded-row">
<td colspan="6" class="t-table__row--full">
<div class="t-table__expanded-row-inner">
<div class="more-detail">
<p class="title"><b>集群名称:</b></p>
<p class="content">集群测试2</p><br>
<p class="title"><b>管理员:</b></p>
<p class="content">jenny</p><br>
<p class="title"><b>描述:</b></p>
<p class="content">test</p>
</div>
</div>
</td>
</tr>
Expand Down
87 changes: 47 additions & 40 deletions test/unit/table/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1560,51 +1560,58 @@ exports[`Table expandable demo works fine 1`] = `
</a>
</td>
</tr>
<tr>
<tr
class="t-table__expanded-row"
>
<td
colspan="5"
class="t-table__row--full"
colspan="6"
>
<div
class="more-detail"
class="t-table__expanded-row-inner"
>
<p
class="title"
>
<b>
集群名称:
</b>
</p>
<p
class="content"
>
集群测试2
</p>
<br />
<p
class="title"
>
<b>
管理员:
</b>
</p>
<p
class="content"
>
jenny
</p>
<br />
<p
class="title"
<div
class="more-detail"
>
<b>
描述:
</b>
</p>
<p
class="content"
>
test
</p>
<p
class="title"
>
<b>
集群名称:
</b>
</p>
<p
class="content"
>
集群测试2
</p>
<br />
<p
class="title"
>
<b>
管理员:
</b>
</p>
<p
class="content"
>
jenny
</p>
<br />
<p
class="title"
>
<b>
描述:
</b>
</p>
<p
class="content"
>
test
</p>
</div>
</div>
</td>
</tr>
Expand Down