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

[Table]树形结构缺陷修复 #1216

Merged
merged 4 commits into from
Jul 27, 2022
Merged

[Table]树形结构缺陷修复 #1216

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
574abc7
fix(table): add left border to multiple line header
chaishi Jul 26, 2022
ca43588
fix(table): can not reset data in EnhancedTable
chaishi Jul 26, 2022
713aeae
test(table): update snapshots
chaishi Jul 26, 2022
fa78418
fix(table): multiple header supports footer
chaishi Jul 27, 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
5 changes: 3 additions & 2 deletions examples/table/demos/tree.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<div>
<t-button @click="appendToRoot">添加根节点</t-button>
<t-button theme="default" style="margin-left: 16px" @click="setData1">重置数据</t-button>
<t-button theme="default" style="margin-left: 16px" @click="resetData">重置/更新数据</t-button>
<t-button theme="default" style="margin-left: 16px" @click="onRowToggle">任意节点展开/收起</t-button>
<t-button theme="default" style="margin-left: 16px" @click="onExpandAllToggle">{{
expandAll ? '收起全部' : '展开全部'
Expand Down Expand Up @@ -224,8 +224,9 @@ export default {

methods: {
// 全新赋值
setData1() {
resetData() {
this.data = getData();
this.$refs.table.resetData(this.data);
},

// 更新
Expand Down
11 changes: 6 additions & 5 deletions src/table/base-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,7 @@ export default defineComponent({
render(h) {
const { rowAndColFixedPosition } = this;
const data = this.isPaginateData ? this.dataSource : this.data;
const columns = this.spansAndLeafNodes?.leafColumns || this.columns;

if (this.allowResizeColumnWidth) {
log.warn('Table', 'allowResizeColumnWidth is going to be deprecated, please use resizable instead.');
Expand All @@ -292,7 +293,7 @@ export default defineComponent({
const defaultColWidth = this.tableLayout === 'fixed' && this.isWidthOverflow ? '100px' : undefined;
const colgroup = (
<colgroup>
{(this.spansAndLeafNodes?.leafColumns || this.columns).map((col) => (
{columns.map((col) => (
<col key={col.colKey} style={{ width: formatCSSUnit(col.width) || defaultColWidth }}></col>
))}
</colgroup>
Expand Down Expand Up @@ -320,7 +321,7 @@ export default defineComponent({
const affixedHeader = Boolean((this.headerAffixedTop || this.isVirtual) && this.tableWidth) && (
<div
ref="affixHeaderRef"
style={{ width: `${this.tableWidth}px`, opacity: headerOpacity }}
style={{ width: `${this.tableWidth - 1}px`, opacity: headerOpacity }}
class={['scrollbar', { [this.tableBaseClass.affixedHeaderElm]: this.headerAffixedTop || this.isVirtual }]}
>
<table class={this.tableElmClasses} style={{ ...this.tableElementStyles, width: `${this.tableElmWidth}px` }}>
Expand Down Expand Up @@ -378,7 +379,7 @@ export default defineComponent({
isFixedHeader={this.isFixedHeader}
rowAndColFixedPosition={rowAndColFixedPosition}
footData={this.footData}
columns={this.columns}
columns={columns}
rowAttributes={this.rowAttributes}
rowClassName={this.rowClassName}
thWidthList={this.thWidthList}
Expand All @@ -399,7 +400,7 @@ export default defineComponent({
rowAndColFixedPosition,
showColumnShadow: this.showColumnShadow,
data: this.isVirtual ? this.visibleData : data,
columns: this.spansAndLeafNodes.leafColumns,
columns,
tableElm: this.tableRef,
tableContentElm: this.tableContentRef,
tableWidth: this.tableWidth,
Expand Down Expand Up @@ -446,7 +447,7 @@ export default defineComponent({
isFixedHeader={this.isFixedHeader}
rowAndColFixedPosition={rowAndColFixedPosition}
footData={this.footData}
columns={this.columns}
columns={columns}
rowAttributes={this.rowAttributes}
rowClassName={this.rowClassName}
></TFoot>
Expand Down
17 changes: 16 additions & 1 deletion src/table/hooks/tree-store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,19 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
});
return;
}

// 懒加载处理：children 为 true，则需清空子元素在 map 中的值，而后方便重新加载
if (get(newRowData, keys.childrenKey) === true) {
const oldChildren = get(rowState.row, keys.childrenKey);
if (oldChildren?.length) {
for (let i = 0, len = oldChildren.length; i < len; i++) {
const rowValue = get(oldChildren[i], keys.rowKey);
const state = this.treeDataMap.get(rowValue);
state && this.treeDataMap.delete(rowValue);
}
}
}

const currentRowIndex = rowState.rowIndex;
rowState.row = newRowData;
rowState.id = newRowValue;
Expand Down Expand Up @@ -448,7 +461,9 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
const children = get(item, keys.childrenKey);
const originalExpanded = state.expanded;
state.rowIndex = this.expandAllRowIndex;
state.expanded = true;
if (children !== true && children?.length) {
state.expanded = true;
}
state.expandChildrenLength = children?.length || 0;
this.expandAllRowIndex += 1;
if (!parentExpanded) {
Expand Down
17 changes: 11 additions & 6 deletions src/table/hooks/useTreeData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,7 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
dataSource.value = data.value;
return;
}
let newVal = cloneDeep(data.value);
store.value.initialTreeStore(newVal, props.columns, rowDataKeys.value);
if (props.tree?.defaultExpandAll) {
newVal = store.value.expandAll(newVal, rowDataKeys.value);
}
dataSource.value = newVal;
resetData(data.value);
},
{ immediate: true },
);
Expand All @@ -97,6 +92,15 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
{ immediate: true },
);

function resetData(data: TableRowData[]) {
let newVal = cloneDeep(data);
store.value.initialTreeStore(newVal, props.columns, rowDataKeys.value);
if (props.tree?.defaultExpandAll) {
newVal = store.value.expandAll(newVal, rowDataKeys.value);
}
dataSource.value = newVal;
}

function getTreeNodeStyle(level: number) {
if (level === undefined) return;
const indent = props.tree?.indent === undefined ? 24 : props.tree?.indent;
Expand Down Expand Up @@ -287,5 +291,6 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
expandAll,
foldAll,
getTreeNode,
resetData,
};
}
2 changes: 1 addition & 1 deletion test/ssr/__snapshots__/ssr.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17631,7 +17631,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/single-sort.vue correc

exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`] = `
<div>
<div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">添加根节点</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">重置数据</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">任意节点展开/收起</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">展开全部</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">获取全部树形结构</span></button></div> <br>
<div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">添加根节点</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">重置/更新数据</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">任意节点展开/收起</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">展开全部</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">获取全部树形结构</span></button></div> <br>
<div><label class="t-checkbox" style="vertical-align:middle;"><input type="checkbox" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">
自定义折叠/展开图标
</span></label></div> <br>
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -20239,7 +20239,7 @@ exports[`Table Table treeVue demo works fine 1`] = `
<span
class="t-button__text"
>
重置数据
重置/更新数据
</span>
</button>

Expand Down