Skip to content

Commit

Permalink
[Table]树形结构缺陷修复 (#1216)
Browse files Browse the repository at this point in the history 
* fix(table): add left border to multiple line header

* fix(table): can not reset data in EnhancedTable

* test(table): update snapshots

* fix(table): multiple header supports footer
  • Loading branch information
@chaishi
chaishi authored Jul 27, 2022
1 parent 8a0a534 commit 0354005
Show file tree
Hide file tree
Showing 6 changed files with 38 additions and 16 deletions.
5 changes: 3 additions & 2 deletions examples/table/demos/tree.vue
View file
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
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
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
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
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
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

0 comments on commit 0354005

Please sign in to comment.