From 49072ba5bd236b2f112689d5fd844b00a9e36ca7 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Fri, 11 Feb 2022 20:11:40 +0800 Subject: [PATCH 1/5] =?UTF-8?q?docs(notification):=20=E6=8F=92=E4=BB=B6?= =?UTF-8?q?=E8=B0=83=E7=94=A8=E4=B8=8E=E5=87=BD=E6=95=B0=E5=BC=8F=E8=B0=83?= =?UTF-8?q?=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/notification/notification.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/notification/notification.md b/examples/notification/notification.md index 35af8b00f..012bade20 100644 --- a/examples/notification/notification.md +++ b/examples/notification/notification.md @@ -6,7 +6,7 @@ {{ close-all }} -### 指令调用形式的消息通知 +### 插件调用与函数式调用 支持插件式调用 `this.$notify` 和函数式调用 `NotifyPlugin` 两种方式，两种方式参数完全一样。 From bbe4c10747f3385ae72b88954c1ed25e31c8743c Mon Sep 17 00:00:00 2001 From: chaishi Date: Tue, 29 Mar 2022 21:18:07 +0800 Subject: [PATCH 2/5] fix(table): merged cells border style --- src/_common | 2 +- src/table/hooks/useClassName.ts | 1 + src/table/tr.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/_common b/src/_common index d0706ddbf..199775dd0 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit d0706ddbf12a4b76ed8f322af344af47fe17b4b2 +Subproject commit 199775dd00796684af23086d975670cfdf193801 diff --git a/src/table/hooks/useClassName.ts b/src/table/hooks/useClassName.ts index 689ab043a..5e7ee94c4 100644 --- a/src/table/hooks/useClassName.ts +++ b/src/table/hooks/useClassName.ts @@ -9,6 +9,7 @@ export default function useClassName() { content: `${classPrefix.value}-table__content`, topContent: `${classPrefix.value}-table__top-content`, tdLastRow: `${classPrefix.value}-table__td-last-row`, + tdFirstCol: `${classPrefix.value}-table__td-first-col`, thCellInner: `${classPrefix.value}-table__th-cell-inner`, bordered: `${classPrefix.value}-table--bordered`, striped: `${classPrefix.value}-table--striped`, diff --git a/src/table/tr.tsx b/src/table/tr.tsx index 7e430ae42..838b59436 100644 --- a/src/table/tr.tsx +++ b/src/table/tr.tsx @@ -292,6 +292,7 @@ export default defineComponent({ { [this.tdEllipsisClass]: col.ellipsis, [this.tableBaseClass.tdLastRow]: rowIndex + cellSpans.rowspan === dataLength, + [this.tableBaseClass.tdFirstCol]: colIndex === 0, [this.tdAlignClasses[col.align]]: col.align && col.align !== 'left', }, ]; From 871f1b166c27d6dda63c71f728fee80c099da29f Mon Sep 17 00:00:00 2001 From: chaishi Date: Sat, 21 May 2022 16:52:45 +0800 Subject: [PATCH 3/5] fix(table): toggleData and FoldAll --- examples/table/table.md | 4 ++-- src/common.ts | 6 +++--- src/table/hooks/tree-store.ts | 6 ++++-- src/table/hooks/useTreeData.tsx | 26 +++++++++++++------------- src/table/type.ts | 1 + 5 files changed, 23 insertions(+), 20 deletions(-) diff --git a/examples/table/table.md b/examples/table/table.md index 4a07510e2..41a524e61 100644 --- a/examples/table/table.md +++ b/examples/table/table.md @@ -172,14 +172,14 @@ tree | Object | - | 树形结构相关配置。具体属性文档查看 `TableTr treeExpandAndFoldIcon | Function | - | 自定义树形结构展开图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode<{ type: 'expand' | 'fold' }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N `PrimaryTableProps` | \- | - | 继承 `PrimaryTableProps` 中的全部 API | N onAbnormalDragSort | Function | | TS 类型：`(context: TableAbnormalDragSortContext) => void`
异常拖拽排序时触发，如：树形结构中，非同层级之间的交换。`context.code` 指交换异常错误码，固定值；`context.reason` 指交换异常的原因。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableAbnormalDragSortContext { code: number; reason: string }`
| N -onTreeExpandChange | Function | | TS 类型：`(context: TableTreeExpandChangeContext) => void`
树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableTreeExpandChangeContext { row: T; rowIndex: number; rowState: TableRowState }`
| N +onTreeExpandChange | Function | | TS 类型：`(context: TableTreeExpandChangeContext) => void`
树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableTreeExpandChangeContext { row: T; rowIndex: number; rowState: TableRowState; trigger?: 'expand-fold-icon' }`
| N ### EnhancedTable Events 名称 | 参数 | 描述 -- | -- | -- abnormal-drag-sort | `(context: TableAbnormalDragSortContext)` | 异常拖拽排序时触发，如：树形结构中，非同层级之间的交换。`context.code` 指交换异常错误码，固定值；`context.reason` 指交换异常的原因。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableAbnormalDragSortContext { code: number; reason: string }`
-tree-expand-change | `(context: TableTreeExpandChangeContext)` | 树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableTreeExpandChangeContext { row: T; rowIndex: number; rowState: TableRowState }`
+tree-expand-change | `(context: TableTreeExpandChangeContext)` | 树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableTreeExpandChangeContext { row: T; rowIndex: number; rowState: TableRowState; trigger?: 'expand-fold-icon' }`
### EnhancedTableInstanceFunctions 组件实例方法 diff --git a/src/common.ts b/src/common.ts index 4635583ec..0bdd212af 100644 --- a/src/common.ts +++ b/src/common.ts @@ -1,4 +1,4 @@ -/** Vue2 特有全局变量 */ +/** Vue2 特有全局类型 */ export type TNodeReturnValue = import('vue/types/vnode').ScopedSlotReturnValue; export type TNode = T extends undefined @@ -10,7 +10,7 @@ export type JsxNode = TNodeReturnValue; export type AttachNodeReturnValue = HTMLElement | Element | Document; export type AttachNode = CSSSelector | ((triggerNode?: HTMLElement) => AttachNodeReturnValue); -// 与滚动相关的容器类型，因为 document 上没有 scroll 相关属性, 因此排除document +// 与滚动相关的容器类型，因为 document 上没有 scroll 相关属性, 因此排除 document export type ScrollContainerElement = Window | HTMLElement; export type ScrollContainer = (() => ScrollContainerElement) | CSSSelector; @@ -21,7 +21,7 @@ export type FormSubmitEvent = Event; export interface Styles { [css: string]: string | number; } -/** 通用全局变量 */ +/** 通用全局类型 */ export type OptionData = { label?: string; diff --git a/src/table/hooks/tree-store.ts b/src/table/hooks/tree-store.ts index b4d06d3ba..417699d32 100644 --- a/src/table/hooks/tree-store.ts +++ b/src/table/hooks/tree-store.ts @@ -386,11 +386,13 @@ class TableTreeStore { if (!parentExpanded) { newData.push(item); } + this.treeDataMap.set(rowValue, state); if (children?.length && !originalExpanded) { // 同步更新父元素的展开数量 let tmpParent = parent; - while (tmpParent) { + while (tmpParent?.row) { tmpParent.expandChildrenLength += children.length; + this.treeDataMap.set(tmpParent.id, tmpParent); tmpParent = tmpParent.parent; } // 继续子元素 @@ -419,7 +421,7 @@ class TableTreeStore { } const children = get(item, keys.childrenKey); if (children?.length) { - this.expandAll(children, keys); + this.foldAll(children, keys); } } return newData; diff --git a/src/table/hooks/useTreeData.tsx b/src/table/hooks/useTreeData.tsx index 36356ffbf..0891ff2ba 100644 --- a/src/table/hooks/useTreeData.tsx +++ b/src/table/hooks/useTreeData.tsx @@ -95,19 +95,19 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC * 组件实例方法，展开或收起某一行 * @param p 行数据 */ - function toggleExpandData(p: { row: TableRowData; rowIndex: number; trigger?: 'inner' }) { + function toggleExpandData(p: { row: TableRowData; rowIndex: number }, trigger?: 'expand-fold-icon') { dataSource.value = store.value.toggleExpandData(p, dataSource.value, rowDataKeys.value); - if (p?.trigger === 'inner') { - const rowValue = get(p.row, rowDataKeys.value.rowKey); - const params = { - row: p.row, - rowIndex: p.rowIndex, - rowState: store.value?.treeDataMap?.get(rowValue), - }; - props.onTreeExpandChange?.(params); - // Vue3 ignore next line - context.emit('tree-expand-change', params); - } + const rowValue = get(p.row, rowDataKeys.value.rowKey); + const rowState = store.value?.treeDataMap?.get(rowValue); + const params = { + row: p.row, + rowIndex: p.rowIndex, + rowState, + trigger, + }; + props.onTreeExpandChange?.(params); + // Vue3 ignore next line + context.emit('tree-expand-change', params); } function getTreeNodeColumnCol() { @@ -139,7 +139,7 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC return (
{!!childrenNodes.length && ( - toggleExpandData({ ...p, trigger: 'inner' })}> + toggleExpandData(p, 'expand-fold-icon')}> {iconNode} )} diff --git a/src/table/type.ts b/src/table/type.ts index c1f82fe73..6475bdaac 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -866,6 +866,7 @@ export interface TableTreeExpandChangeContext { row: T; rowIndex: number; rowState: TableRowState; + trigger?: 'expand-fold-icon'; } export type TableRowValue = string | number; From f5bb2e94cdb5f693facb289086792b4ee1144b2d Mon Sep 17 00:00:00 2001 From: chaishi Date: Sat, 21 May 2022 17:48:44 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix(table):=20=E6=A0=91=E5=BD=A2=E7=BB=93?= =?UTF-8?q?=E6=9E=84=E4=B8=AD=EF=BC=8C=E5=8A=A8=E6=80=81=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E8=A1=8C=E9=80=89=E4=B8=AD=E5=88=97=E6=97=B6=EF=BC=8C=E7=A6=81?= =?UTF-8?q?=E7=94=A8=E5=8A=9F=E8=83=BD=E5=A4=B1=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/table/hooks/tree-store.ts | 19 +++++++++++++++++++ src/table/hooks/useTreeData.tsx | 7 +++++++ 2 files changed, 26 insertions(+) diff --git a/src/table/hooks/tree-store.ts b/src/table/hooks/tree-store.ts index 417699d32..54b8f8fc1 100644 --- a/src/table/hooks/tree-store.ts +++ b/src/table/hooks/tree-store.ts @@ -471,6 +471,25 @@ class TableTreeStore { } } + // column.checkProps 和 column.disabled 会影响行的禁用状态，因此当列发生变化时，需要重置禁用状态 + updateDisabledState(dataSource: T[], column: PrimaryTableCol, keys: KeysType) { + for (let i = 0, len = dataSource.length; i < len; i++) { + const item = dataSource[i]; + const rowValue = get(item, keys.rowKey); + if (rowValue === undefined) { + log.error('EnhancedTable', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.'); + return; + } + const state = this.treeDataMap.get(rowValue); + state.disabled = isRowSelectedDisabled(column, item, i); + this.treeDataMap.set(rowValue, state); + const children = get(item, keys.childrenKey); + if (children?.length) { + this.updateDisabledState(children, column, keys); + } + } + } + /** * 校验数据合法性 */ diff --git a/src/table/hooks/useTreeData.tsx b/src/table/hooks/useTreeData.tsx index 0891ff2ba..e4e608465 100644 --- a/src/table/hooks/useTreeData.tsx +++ b/src/table/hooks/useTreeData.tsx @@ -28,6 +28,13 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC childrenKey: props.tree?.childrenKey || 'children', })); + const checkedColumn = computed(() => columns.value.find((col) => col.colKey === 'row-select')); + + watch(checkedColumn, (column) => { + if (!store.value) return; + store.value.updateDisabledState(dataSource.value, column, rowDataKeys.value); + }); + function getFoldIcon(h: CreateElement) { const params = { type: 'fold' }; const defaultFoldIcon = t(global.value.treeExpandAndFoldIcon, h, params) || ; From f2111d90d3f7feec86157711e314580150612cf8 Mon Sep 17 00:00:00 2001 From: chaishi Date: Sun, 12 Jun 2022 14:31:03 +0800 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=E8=A1=A8=E5=A4=B4=E5=90=B8?= =?UTF-8?q?=E5=BA=95=E5=92=8C=E5=90=B8=E9=A1=B6=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/table/hooks/useFixed.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/table/hooks/useFixed.ts b/src/table/hooks/useFixed.ts index 7f921c6bf..9e9a01b7d 100644 --- a/src/table/hooks/useFixed.ts +++ b/src/table/hooks/useFixed.ts @@ -444,13 +444,17 @@ export default function useFixed(props: TdBaseTableProps, context: SetupContext) const updateAffixHeaderOrFooter = () => { const pos = tableContentRef.value.getBoundingClientRect(); - if (props.headerAffixedTop || props.scroll?.type === 'virtual') { - const r = affixHeaderRef.value?.offsetHeight - pos.top < pos.height; + if ((props.headerAffixedTop || props.scroll?.type === 'virtual') && affixHeaderRef.value) { + const headerRect = affixHeaderRef.value.getBoundingClientRect(); + const offsetTop = props.headerAffixProps?.offsetTop || 0; + const footerHeight = affixFooterRef?.value?.offsetHeight || 0; + const r = Math.abs(pos.top) < pos.height - headerRect.height - offsetTop - footerHeight; showAffixHeader.value = r; } - if (props.footerAffixedBottom) { - showAffixFooter.value = pos.top + (affixFooterRef?.value?.clientHeight || 48) <= window.innerHeight - && -1 * pos.top < (tableContentRef?.value?.parentNode as HTMLDivElement)?.clientHeight; + if (props.footerAffixedBottom && affixFooterRef?.value) { + const footerRect = affixFooterRef.value.getBoundingClientRect(); + const headerHeight = affixHeaderRef?.value?.offsetHeight || 0; + showAffixFooter.value = pos.top + headerHeight < footerRect.top && footerRect.top > footerRect.height; } };