From 72fd400ab395986b496b087ea03fa3eb2290326e Mon Sep 17 00:00:00 2001 From: chaishi Date: Sun, 9 Jan 2022 19:07:15 +0800 Subject: [PATCH 1/7] fix(table): table show empty element on empty data in filter table --- src/table/base-table/table-body.tsx | 6 +++--- src/table/primary-table/index.tsx | 4 ---- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/table/base-table/table-body.tsx b/src/table/base-table/table-body.tsx index 8a5dbc29c..a680bc851 100644 --- a/src/table/base-table/table-body.tsx +++ b/src/table/base-table/table-body.tsx @@ -130,12 +130,12 @@ export default Vue.extend({ }, renderFullRow(type: 'firstFullRow' | 'lastFullRow') { - const firstFullRowNode = renderTNodeJSX(this, type); - if (firstFullRowNode) { + const fullRowNode = renderTNodeJSX(this, type); + if (fullRowNode) { return ( - {firstFullRowNode} + {fullRowNode} ); diff --git a/src/table/primary-table/index.tsx b/src/table/primary-table/index.tsx index 87b6b5850..e11aaccd7 100644 --- a/src/table/primary-table/index.tsx +++ b/src/table/primary-table/index.tsx @@ -97,10 +97,6 @@ export default mixins(expand, select, sort, rowDraggable, filter, showColumns, a scopedSlots, on, }; - // 存在过滤条件，查询结果为空时，不显示空数据节点，有过滤结果行即可 - if (this.hasFilterCondition) { - baseTableProps.props.empty = null; - } // TODO: 可使用插槽 `topContent` 自定义显示列 return ; }, From 656802f77183e41f72c300a1cf454b6b4ebad8b8 Mon Sep 17 00:00:00 2001 From: chaishi Date: Sun, 9 Jan 2022 22:06:31 +0800 Subject: [PATCH 2/7] refactor(table): refactor table asyncLoadin with lastFullRow instead of providerg --- examples/table/demos/async-loading.vue | 6 +- src/_common | 2 +- src/table/base-table/index.tsx | 4 +- src/table/base-table/table-body.tsx | 23 +++---- src/table/primary-table/index.tsx | 30 ++++----- .../primary-table/mixins/async-loading.tsx | 62 +++++++------------ src/table/primary-table/mixins/filter.tsx | 3 +- 7 files changed, 52 insertions(+), 78 deletions(-) diff --git a/examples/table/demos/async-loading.vue b/examples/table/demos/async-loading.vue index ab03740ee..02b659ff4 100644 --- a/examples/table/demos/async-loading.vue +++ b/examples/table/demos/async-loading.vue @@ -81,14 +81,12 @@ export default { }, computed: { loadingNode() { - return this.asyncLoading === 'loading-custom' - ? this.customLoadingNode - : this.asyncLoading; + return this.asyncLoading === 'loading-custom' ? this.customLoadingNode : this.asyncLoading; }, }, methods: { customLoadingNode() { - return
这是自定义加载状态和内容
; + return
这是自定义加载状态和内容
; }, onAsyncLoadingClick({ status }) { if (status === 'load-more') { diff --git a/src/_common b/src/_common index 8888bbbcb..b97317b5d 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 8888bbbcb36eeb92d9acdabfdea8f235f558c314 +Subproject commit b97317b5dda43c86aa3c7dfd1b523cc9d5b550f9 diff --git a/src/table/base-table/index.tsx b/src/table/base-table/index.tsx index 3f9c19bda..b5774dfdc 100644 --- a/src/table/base-table/index.tsx +++ b/src/table/base-table/index.tsx @@ -36,9 +36,7 @@ export default mixins(getConfigReceiverMixins('table')).extend provider: { type: Object, default() { - return { - renderRows(): void {}, - }; + return {}; }, }, }, diff --git a/src/table/base-table/table-body.tsx b/src/table/base-table/table-body.tsx index a680bc851..f5cadfcc0 100644 --- a/src/table/base-table/table-body.tsx +++ b/src/table/base-table/table-body.tsx @@ -1,5 +1,6 @@ import Vue, { VNode } from 'vue'; import get from 'lodash/get'; +import camelCase from 'lodash/camelCase'; import { emitEvent } from '../../utils/event'; import { prefix } from '../../config'; import baseTableProps from '../base-table-props'; @@ -28,9 +29,7 @@ export default Vue.extend({ provider: { type: Object, default() { - return { - renderRows(): void {}, - }; + return {}; }, }, current: { @@ -129,12 +128,12 @@ export default Vue.extend({ return props; }, - renderFullRow(type: 'firstFullRow' | 'lastFullRow') { - const fullRowNode = renderTNodeJSX(this, type); + renderFullRow(type: 'first-full-row' | 'last-full-row') { + const fullRowNode = renderTNodeJSX(this, camelCase(type)); if (fullRowNode) { return ( - + {fullRowNode} @@ -148,7 +147,6 @@ export default Vue.extend({ data, rowClassName, rowKey, - provider, $scopedSlots: scopedSlots, rowspanAndColspan, selectedRowKeys, @@ -211,19 +209,12 @@ export default Vue.extend({ rowVnode = ; // 按行渲染 body.push(rowVnode); - - provider.renderRows({ - rows: body, - row, - rowIndex: index, - columns: this.columns, - }); }); - const firstRow = this.renderFullRow('firstFullRow'); + const firstRow = this.renderFullRow('first-full-row'); if (firstRow) { body = [firstRow].concat(body); } - const lastRow = this.renderFullRow('lastFullRow'); + const lastRow = this.renderFullRow('last-full-row'); if (lastRow) { body = body.concat(lastRow); } diff --git a/src/table/primary-table/index.tsx b/src/table/primary-table/index.tsx index e11aaccd7..e5299cf88 100644 --- a/src/table/primary-table/index.tsx +++ b/src/table/primary-table/index.tsx @@ -13,9 +13,9 @@ import rowDraggable from './mixins/row-draggable'; import filter from './mixins/filter'; import showColumns from './mixins/show-columns'; import asyncLoadingMixin from './mixins/async-loading'; -import { RenderExpandRow } from '../util/interface'; import { PageInfo } from '../../pagination/type'; import { emitEvent } from '../../utils/event'; +import { renderTNodeJSX } from '../../utils/render-tnode'; type PageChangeContext = Parameters; type ChangeContext = Parameters; @@ -27,9 +27,6 @@ export default mixins(expand, select, sort, rowDraggable, filter, showColumns, a ...primaryTableProps, }, computed: { - rehandleData(): Array { - return this.asyncLoadingHandler([...this.data]); - }, rehandleColumns(): Array { let columns = this.columns.map((col) => ({ ...col })); columns = this.getShowColumns([...this.columns]); @@ -46,14 +43,19 @@ export default mixins(expand, select, sort, rowDraggable, filter, showColumns, a } }, methods: { - // 提供给 BaseTable 添加渲染 Rows 方法 - renderRows(params: RenderExpandRow): void { - const { row, rowIndex, rows } = params; - if (row.colKey === 'async-loading-row') { - rows.splice(rowIndex, 1, this.renderAsyncLoadingRow()); - return; - } - this.renderExpandedRow(params); + // 最后一行，通行数据，可能是异步加载状态，可能是其他 + renderLastFullRow() { + const lastFullRow = renderTNodeJSX(this, 'lastFullRow'); + const asyncLoadingNode = this.renderAsyncLoadingRow(); + const nodes = [lastFullRow, asyncLoadingNode].filter((v) => ![undefined, null, false].includes(v)); + if (nodes.length === 0) return null; + if (nodes.length === 1) return nodes[0]; + return ( +
+ {nodes[0]} + {nodes[1]} +
+ ); }, }, render() { @@ -83,15 +85,15 @@ export default mixins(expand, select, sort, rowDraggable, filter, showColumns, a const baseTableProps = { props: { ...$props, - data: this.rehandleData, + data: this.data, columns: rehandleColumns, provider: { - renderRows: this.renderRows, sortOnRowDraggable: this.sortOnRowDraggable, dragging: this.dragging, }, // this.hasFilterCondition is from mixins/filter.tsx firstFullRow: this.hasFilterCondition ? this.renderFirstFilterRow : this.firstFullRow, + lastFullRow: this.renderLastFullRow, empty: this.empty, }, scopedSlots, diff --git a/src/table/primary-table/mixins/async-loading.tsx b/src/table/primary-table/mixins/async-loading.tsx index 1e9ba21a4..5cbe7024e 100644 --- a/src/table/primary-table/mixins/async-loading.tsx +++ b/src/table/primary-table/mixins/async-loading.tsx @@ -1,14 +1,13 @@ import Vue, { VNode } from 'vue'; -import { CreateElement } from 'vue/types/umd'; +import isString from 'lodash/isString'; import primaryTableProps from '../../primary-table-props'; -import TableRow from '../../base-table/table-row'; import Loading from '../../../loading'; import { prefix } from '../../../config'; import { STATUS_CLASSNAMES } from '../../../utils/classnames'; -// import GradientIcon from '../../../loading/icon/gradient'; import { emitEvent } from '../../../utils/event'; import { TdPrimaryTableProps } from '../../type'; import { ClassName } from '../../../common'; +import { renderTNodeJSX } from '../../../utils/render-tnode'; type AsyncLoadingClickParams = Parameters; @@ -18,7 +17,6 @@ export default Vue.extend({ name: `${prefix}-primary-table-async-loading`, props: { - columns: primaryTableProps.columns, asyncLoading: primaryTableProps.asyncLoading, }, @@ -41,46 +39,32 @@ export default Vue.extend({ }, methods: { - // 异步加载 pullDownLoading 新增一条数据 - asyncLoadingHandler(data: TdPrimaryTableProps['data']): TdPrimaryTableProps['data'] { - if (this.asyncLoading || typeof this.$scopedSlots.asyncLoading === 'function') { - return data.concat({ colKey: ASYNC_LOADING_ROW }); - } - return data; - }, onLoadClick() { if (typeof this.asyncLoading !== 'string') return; emitEvent(this, 'async-loading-click', { status: this.asyncLoading }); }, renderAsyncLoadingRow(): VNode { - const { asyncLoading } = this; - const columns = [ - { - colKey: ASYNC_LOADING_ROW, - attrs: { colSpan: this.columns.length }, - render: (h: CreateElement) => { - if (typeof asyncLoading === 'function') { - return asyncLoading(h); - } - if (typeof this.$scopedSlots.asyncLoading === 'function') { - return this.$scopedSlots.asyncLoading(h); - } - const loadingText = { - 'load-more': '点击加载更多', - loading: '正在加载中，请稍后', - }[String(asyncLoading)]; - if (!loadingText) { - return ''; - } - return ( -
- {} -
- ); - }, - }, - ]; - return ; + const asyncLoadingNode = renderTNodeJSX(this, 'asyncLoading'); + if (isString(asyncLoadingNode)) { + const { asyncLoading } = this; + const loadingText = { + 'load-more': '点击加载更多', + loading: '正在加载中，请稍后', + }[String(asyncLoading)]; + return ( +
+ {} +
+ ); + } + if (![null, false, undefined].includes(asyncLoadingNode)) { + return ( +
+ {asyncLoadingNode} +
+ ); + } + return null; }, }, }); diff --git a/src/table/primary-table/mixins/filter.tsx b/src/table/primary-table/mixins/filter.tsx index 6c29fed8d..0344a4b5c 100644 --- a/src/table/primary-table/mixins/filter.tsx +++ b/src/table/primary-table/mixins/filter.tsx @@ -82,7 +82,8 @@ export default Vue.extend({ methods: { updateTableWidth() { - const tbody = this.$el.querySelector(`.${prefix}-table__body`); + if (!this.$el) return; + const tbody = this.$el?.querySelector(`.${prefix}-table__body`); if (tbody) { this.tableWidth = tbody.clientWidth; } else { From 51f98f54e0163cf7c7e9f422bed251414ff138e9 Mon Sep 17 00:00:00 2001 From: chaishi Date: Mon, 10 Jan 2022 10:09:43 +0800 Subject: [PATCH 3/7] fix(table): expandedRow --- examples/table/table.md | 7 ++- src/table/base-table-props.ts | 6 +-- src/table/base-table/table-body.tsx | 5 ++- src/table/enhanced-table-props.ts | 2 +- src/table/primary-table-props.ts | 4 +- src/table/primary-table/index.tsx | 2 +- src/table/primary-table/mixins/expand.tsx | 54 ++++++++--------------- src/table/primary-table/mixins/select.tsx | 16 +++---- src/table/type.ts | 10 ++--- 9 files changed, 41 insertions(+), 65 deletions(-) diff --git a/examples/table/table.md b/examples/table/table.md index 2a1567b12..0ffc2307b 100644 --- a/examples/table/table.md +++ b/examples/table/table.md @@ -10,7 +10,6 @@ columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型： data | Array | [] | 数据源，泛型 T 指表格数据类型。TS 类型：`Array` | N disableDataSort | Boolean | false | 是否禁用本地数据排序。当 `data` 数据长度超过分页大小时，会自动进行本地数据排序。如果 `disabledDataSort` 设置为 true，则无论何时，都不会进行本地排序 | N empty | String / Slot / Function | '' | 空表格呈现样式。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -expandedRow | String / Slot / Function | - | 展开行内容，可自定义，泛型 T 指表格数据类型。TS 类型：`string | TNode<{ row: T; index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N firstFullRow | String / Slot / Function | - | 首行内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N height | String / Number | 'auto' | 表格高度，超出后会出现滚动条。示例：100, '30%', '300px'。值为数字类型，会自动加上单位 px | N hover | Boolean | false | 是否显示鼠标悬浮状态 | N @@ -75,7 +74,7 @@ width | String / Number | - | 列宽 | N -- | -- | -- | -- | -- asyncLoading | String / Slot / Function | - | 异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容。TS 类型：`'loading' | 'load-more' | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array>` | N -dragSort | Boolean | false |【开发中】是否开始拖拽排序，会显示拖拽图标 | N +dragSort | Boolean | false | 是否开始拖拽排序，会显示拖拽图标 | N expandedRow | String / Slot / Function | - | 展开行内容，泛型 T 指表格数据类型。TS 类型：`TNode<{ row: T; index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N expandedRowKeys | Array | [] | 展开行。支持语法糖。TS 类型：`Array` | N defaultExpandedRowKeys | Array | [] | 展开行。非受控属性。TS 类型：`Array` | N @@ -89,7 +88,7 @@ multipleSort | Boolean | false | 是否支持多列排序 | N selectedRowKeys | Array | - | 选中的行，控制属性。支持语法糖。TS 类型：`Array` | N defaultSelectedRowKeys | Array | - | 选中的行，控制属性。非受控属性。TS 类型：`Array` | N showColumnController | Boolean | false | 【开发中】是否显示 自定义显示列控制器 | N -showDragCol | Boolean | false | 【开发中】是否显示为通过拖拽图标进行排序 | N +showDragCol | Boolean | false | 【讨论中-待定】是否显示为通过拖拽图标进行排序 | N sort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDatasort = true`。支持语法糖。TS 类型：`TableSort`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N defaultSort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDatasort = true`。非受控属性。TS 类型：`TableSort`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N sortOnRowDraggable | Boolean | false | 允许表格行拖拽时排序 | N @@ -129,7 +128,7 @@ render | Function | - | 自定义表头或单元格，泛型 T 指表格数据 sorter | Boolean / Function | false | 该列是否支持排序。值为 true 表示该列支持排序；值类型为函数，表示对本地数据 `data` 进行排序。泛型 T 指表格数据类型。TS 类型：`boolean | SorterFun`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N sortType | String | all | 当前列支持排序的方式，desc 表示当前列只能进行降序排列；asc 表示当前列只能进行升序排列；all 表示当前列既可升序排列，又可以降序排列。可选项：desc/asc/all。TS 类型：`SortType`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N title | String / Function | - | 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染，插槽名称为 title 的值。优先级高于 render。TS 类型：`string | TNode<{ col: PrimaryTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -type | String | single | 行选中有两种模式：单选和多选。可选项：single/multiple | N +type | String | single | 行选中有两种模式：单选和多选。`colKey` 值为 `row-select` 时，表示当前列选中项， `type=single/multiple` 有效。可选项：single/multiple | N `Omit` | - | - | 继承 `Omit` 中的全部 API | N ### EnhancedTable Props diff --git a/src/table/base-table-props.ts b/src/table/base-table-props.ts index da7f945c1..f8e6c03df 100644 --- a/src/table/base-table-props.ts +++ b/src/table/base-table-props.ts @@ -2,7 +2,7 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-25 11:57:19 + * updated at 2022-01-10 09:31:10 * */ import { TdBaseTableProps } from '../table/type'; @@ -28,10 +28,6 @@ export default { type: [String, Function] as PropType, default: '', }, - /** 展开行内容，可自定义，泛型 T 指表格数据类型 */ - expandedRow: { - type: [String, Function] as PropType, - }, /** 首行内容 */ firstFullRow: { type: [String, Function] as PropType, diff --git a/src/table/base-table/table-body.tsx b/src/table/base-table/table-body.tsx index f5cadfcc0..47e85c9db 100644 --- a/src/table/base-table/table-body.tsx +++ b/src/table/base-table/table-body.tsx @@ -209,6 +209,9 @@ export default Vue.extend({ rowVnode = ; // 按行渲染 body.push(rowVnode); + // 渲染展开行 + const expandedRow = this.provider.renderExpandedRow?.({ row, index }); + expandedRow && (body = body.concat(expandedRow)); }); const firstRow = this.renderFullRow('first-full-row'); if (firstRow) { @@ -224,7 +227,7 @@ export default Vue.extend({ render() { if (this.provider.sortOnRowDraggable) { - const className = `${prefix}-table__body ${this.provider.dragging ? 'dragging' : ''}`; + const className = `${prefix}-table__body ${this.provider.dragging ? `${prefix}-table__body--dragging` : ''}`; return ( {this.renderBody()} diff --git a/src/table/enhanced-table-props.ts b/src/table/enhanced-table-props.ts index f7074f96c..114355599 100644 --- a/src/table/enhanced-table-props.ts +++ b/src/table/enhanced-table-props.ts @@ -2,7 +2,7 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-23 13:19:48 + * updated at 2022-01-10 09:31:10 * */ import { TdEnhancedTableProps } from '../table/type'; diff --git a/src/table/primary-table-props.ts b/src/table/primary-table-props.ts index 6f8e01406..2c55f5567 100644 --- a/src/table/primary-table-props.ts +++ b/src/table/primary-table-props.ts @@ -2,7 +2,7 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-25 11:57:19 + * updated at 2022-01-10 09:31:10 * */ import { TdPrimaryTableProps } from '../table/type'; @@ -69,7 +69,7 @@ export default { }, /** 【开发中】是否显示 自定义显示列控制器 */ showColumnController: Boolean, - /** 【开发中】是否显示为通过拖拽图标进行排序 */ + /** 【讨论中-待定】是否显示为通过拖拽图标进行排序 */ showDragCol: Boolean, /** 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDatasort = true` */ sort: { diff --git a/src/table/primary-table/index.tsx b/src/table/primary-table/index.tsx index e5299cf88..7428a4539 100644 --- a/src/table/primary-table/index.tsx +++ b/src/table/primary-table/index.tsx @@ -85,9 +85,9 @@ export default mixins(expand, select, sort, rowDraggable, filter, showColumns, a const baseTableProps = { props: { ...$props, - data: this.data, columns: rehandleColumns, provider: { + renderExpandedRow: this.expandedRow ?? this.$scopedSlots.expandedRow ? this.renderExpandedRow : undefined, sortOnRowDraggable: this.sortOnRowDraggable, dragging: this.dragging, }, diff --git a/src/table/primary-table/mixins/expand.tsx b/src/table/primary-table/mixins/expand.tsx index 9e88819cd..93085ee09 100644 --- a/src/table/primary-table/mixins/expand.tsx +++ b/src/table/primary-table/mixins/expand.tsx @@ -3,9 +3,8 @@ import get from 'lodash/get'; import { TdPrimaryTableProps } from '../../type'; import baseTableProps from '../../base-table-props'; import ExpandBox from '../expand-box'; -import TableRow from '../../base-table/table-row'; -import { ExpandProps, RenderExpandRow } from '../../util/interface'; -import { filterDataByIds, getRecord } from '../../util/common'; +import { ExpandProps } from '../../util/interface'; +import { filterDataByIds } from '../../util/common'; import { prefix } from '../../../config'; import { emitEvent } from '../../../utils/event'; import { renderTNodeJSX } from '../../../utils/render-tnode'; @@ -17,6 +16,7 @@ export default Vue.extend({ name: `${prefix}-primary-table-expand`, props: { data: baseTableProps.data, + columns: baseTableProps.columns, rowKey: baseTableProps.rowKey, ...ExpandProps, }, @@ -36,6 +36,7 @@ export default Vue.extend({ return [ { colKey: expandedColKey, + align: 'center', width: 48, attrs: { class: [`${prefix}-table__expandable-icon-cell`], @@ -66,40 +67,21 @@ export default Vue.extend({ /> ); }, - // 渲染被展开的TableRow内容 - renderExpandedRow({ - rows, row, columns: defaultColumns, rowIndex, - }: RenderExpandRow): VNode { - const columnCounts = defaultColumns.length; - const expandRowHandler = this.getExpandRowHandler(); - if (!expandRowHandler) return; // 若无展开渲染函数，则无需处理行数据 - const { expandedRowKeys } = this; - const id = get(row, this.reRowKey); - const isShowExpanded = expandedRowKeys.includes(id); - const params = { - record: getRecord(row), - row, - index: rowIndex, - }; - const columns = [ - { - colKey: 'expanded-row', - attrs: { - colspan: columnCounts, - class: [`${prefix}-table__expanded-cell`], - }, - render: (h: CreateElement): VNode => expandRowHandler(h, params) as VNode, - }, - ]; - rows.push( - , - ); + // 渲染被展开行 + renderExpandedRow( + params: Parameters[1], + ): ReturnType { + const id = get(params.row, this.reRowKey); + const isShowExpanded = this.expandedRowKeys.includes(id); + if (isShowExpanded) { + return ( + + {renderTNodeJSX(this, 'expandedRow', { params })} + + ); + } + return null; }, // handle diff --git a/src/table/primary-table/mixins/select.tsx b/src/table/primary-table/mixins/select.tsx index 94d9de675..bec2f101d 100644 --- a/src/table/primary-table/mixins/select.tsx +++ b/src/table/primary-table/mixins/select.tsx @@ -62,7 +62,7 @@ export default Vue.extend({ }), } : {}), - ...(isSelection ? ({ title }) : {}), + ...(isSelection ? { title } : {}), }; }); }, @@ -73,7 +73,8 @@ export default Vue.extend({ indeterminate={this.isSelectedSome} disabled={!this.canSelectedRows.length} {...{ on: { change: this.handleSelectAll } }} - />); + /> + ); }, // render @@ -83,16 +84,15 @@ export default Vue.extend({ checked: this.selectedRowKeys.includes(get(row, this.reRowKey)), ...column, type: column.type, - checkProps: typeof column.checkProps === 'function' - ? column.checkProps({ row, rowIndex }) - : column.checkProps, + checkProps: + typeof column.checkProps === 'function' ? column.checkProps({ row, rowIndex }) : column.checkProps, disabled: typeof column.disabled === 'function' ? column.disabled({ row, rowIndex }) : column.disabled, rowIndex, }, on: { click: (e: MouseEvent) => { // 选中行功能中，点击 checkbo/radio 需阻止事件冒泡，避免触发不必要的 onRowClick - e.stopPropagation(); + e?.stopPropagation(); }, // radio 单选框可再点击一次关闭选择，input / change 事件无法监听 change: (): void => this.handleSelectChange(row), @@ -127,9 +127,9 @@ export default Vue.extend({ const { selectedRowKeys, canSelectedRows, reRowKey } = this; const canSelectedRowKeys = canSelectedRows.map((record) => get(record, reRowKey)); const disabledSelectedRowKeys = selectedRowKeys.filter((id) => !canSelectedRowKeys.includes(id)); - const allIds = (this.isSelectedAll + const allIds = this.isSelectedAll ? [...disabledSelectedRowKeys] - : [...disabledSelectedRowKeys, ...canSelectedRowKeys]); + : [...disabledSelectedRowKeys, ...canSelectedRowKeys]; emitEvent(this, 'select-change', allIds, { selectedRowData: filterDataByIds(this.data, allIds, reRowKey), type: this.isSelectedAll ? 'uncheck' : 'check', diff --git a/src/table/type.ts b/src/table/type.ts index d8df4f4de..40697eab2 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -2,7 +2,7 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-25 11:57:19 + * updated at 2022-01-10 09:31:10 * */ import { PaginationProps, PageInfo } from '../pagination'; @@ -37,10 +37,6 @@ export interface TdBaseTableProps { * @default '' */ empty?: string | TNode; - /** - * 展开行内容，可自定义，泛型 T 指表格数据类型 - */ - expandedRow?: string | TNode<{ row: T; index: number }>; /** * 首行内容 */ @@ -280,7 +276,7 @@ export interface TdPrimaryTableProps */ showColumnController?: boolean; /** - * 【开发中】是否显示为通过拖拽图标进行排序 + * 【讨论中-待定】是否显示为通过拖拽图标进行排序 * @default false */ showDragCol?: boolean; @@ -373,7 +369,7 @@ export interface PrimaryTableCol */ title?: string | TNode<{ col: PrimaryTableCol; colIndex: number }>; /** - * 行选中有两种模式：单选和多选 + * 行选中有两种模式：单选和多选。`colKey` 值为 `row-select` 时，表示当前列选中项， `type=single/multiple` 有效 * @default single */ type?: 'single' | 'multiple'; From 083ba9a8c8057c807bca9de8bdf9e19c574f0bfd Mon Sep 17 00:00:00 2001 From: chaishi Date: Mon, 10 Jan 2022 10:53:56 +0800 Subject: [PATCH 4/7] test(table): update snapshots --- src/table/primary-table/mixins/expand.tsx | 1 - .../table/__snapshots__/demo.test.js.snap | 164 +----------------- 2 files changed, 1 insertion(+), 164 deletions(-) diff --git a/src/table/primary-table/mixins/expand.tsx b/src/table/primary-table/mixins/expand.tsx index 93085ee09..6851d1fdf 100644 --- a/src/table/primary-table/mixins/expand.tsx +++ b/src/table/primary-table/mixins/expand.tsx @@ -36,7 +36,6 @@ export default Vue.extend({ return [ { colKey: expandedColKey, - align: 'center', width: 48, attrs: { class: [`${prefix}-table__expandable-icon-cell`], diff --git a/test/unit/table/__snapshots__/demo.test.js.snap b/test/unit/table/__snapshots__/demo.test.js.snap index 72b2e53f2..d3efb3644 100644 --- a/test/unit/table/__snapshots__/demo.test.js.snap +++ b/test/unit/table/__snapshots__/demo.test.js.snap @@ -1467,59 +1467,6 @@ exports[`Table expandable demo works fine 1`] = ` - - -
-

- - 集群名称: - -

-

- 集群测试1 -

-
-

- - 管理员: - -

-

- jenny;peter -

-
-

- - 描述: - -

-

- 隐藏展开图标 -

-
- -
- - -
-

- - 集群名称: - -

-

- 集群测试3 -

-
-

- - 管理员: - -

-

- jenny -

-
-

- - 描述: - -

-

- 自定义图标 -

-
- - - - -
-

- - 集群名称: - -

-

- 集群测试4 -

-
-

- - 管理员: - -

-

- peter -

-
-

- - 描述: - -

-

- test -

-
- -
From a2e3d1cb8739aa517541391af5cd7a3ed3243485 Mon Sep 17 00:00:00 2001 From: chaishi Date: Mon, 10 Jan 2022 11:16:31 +0800 Subject: [PATCH 5/7] test: update snapshots --- src/drawer/drawer.tsx | 20 +++++-- test/ssr/__snapshots__/ssr.test.js.snap | 80 +------------------------ 2 files changed, 16 insertions(+), 84 deletions(-) diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx index 9a01baed0..2a87d7c4a 100644 --- a/src/drawer/drawer.tsx +++ b/src/drawer/drawer.tsx @@ -87,12 +87,8 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d immediate: true, }, visible: { - handler(value) { - if (value && !this.showInAttachedElement) { - this.preventScrollThrough && addClass(document.body, lockClass); - } else { - this.preventScrollThrough && removeClass(document.body, lockClass); - } + handler(val) { + this.handleScrollThrough(val); }, immediate: true, }, @@ -102,6 +98,10 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d this.updatePushMode(); }, + mounted() { + this.handleScrollThrough(this.visible); + }, + render() { if (this.destroyOnClose && !this.visible) return; const defaultCloseBtn = ; @@ -132,6 +132,14 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d }, methods: { + handleScrollThrough(visible: boolean) { + if (!document || !document.body) return; + if (visible && !this.showInAttachedElement) { + this.preventScrollThrough && addClass(document.body, lockClass); + } else { + this.preventScrollThrough && removeClass(document.body, lockClass); + } + }, handlePushMode() { if (this.mode !== 'push') return; this.$nextTick(() => { diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index ebecf5ff1..3c61e7404 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -3334,33 +3334,18 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/table.vue co Vue(PC) A - - -
This is expanded row info
- - String React(PC) B - - -
This is expanded row info
- - Object Miniprogram C - - -
This is expanded row info
- - @@ -10207,7 +10192,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/async-loading.vue corr zcroson5@virginia.edu - +
@@ -10663,18 +10648,6 @@ exports[`ssr snapshot test renders ./examples/table/demos/expandable.vue correct 隐藏展开图标 管理 删除 - - -
-

集群名称:

-

集群测试1


-

管理员:

-

jenny;peter


-

描述:

-

隐藏展开图标

-
- - 集群测试2 @@ -10687,7 +10660,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/expandable.vue correct 管理 删除 - +

集群名称:

集群测试2


@@ -10709,18 +10682,6 @@ exports[`ssr snapshot test renders ./examples/table/demos/expandable.vue correct 自定义图标 管理 删除 - - -
-

集群名称:

-

集群测试3


-

管理员:

-

jenny


-

描述:

-

自定义图标

-
- - 集群测试4 @@ -10732,18 +10693,6 @@ exports[`ssr snapshot test renders ./examples/table/demos/expandable.vue correct test 管理 删除 - - -
-

集群名称:

-

集群测试4


-

管理员:

-

peter


-

描述:

-

test

-
- -
@@ -12471,11 +12420,6 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree-select.vue correc jenny important. - - -
这是展开项数据，我是 0 号
- - @@ -12491,11 +12435,6 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree-select.vue correc peter important. - - -
这是展开项数据，我是 1 号
- - @@ -12511,11 +12450,6 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree-select.vue correc jenny important. - - -
这是展开项数据，我是 2 号
- - @@ -12531,11 +12465,6 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree-select.vue correc peter important. - - -
这是展开项数据，我是 3 号
- - @@ -12551,11 +12480,6 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree-select.vue correc jenny important. - - -
这是展开项数据，我是 4 号
- - From 53e9dd0a90f95b42bc5a03051a3d937d9624549c Mon Sep 17 00:00:00 2001 From: chaishi Date: Tue, 11 Jan 2022 20:02:58 +0800 Subject: [PATCH 6/7] docs(drawer): support preventScrollThrough --- examples/drawer/demos/no-mask.vue | 9 ++++++++- src/drawer/drawer.tsx | 3 +-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/examples/drawer/demos/no-mask.vue b/examples/drawer/demos/no-mask.vue index b8a098f3f..5b6775e5c 100644 --- a/examples/drawer/demos/no-mask.vue +++ b/examples/drawer/demos/no-mask.vue @@ -1,6 +1,13 @@