From 466033b570324d9d85faeb3e03ad48875de88562 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Tue, 27 Sep 2022 10:23:17 +0800 Subject: [PATCH] 20220925 feature table (#1740) * fix(table): selected change value is not right * feat(table): some features and bugs * test(unit): update snapshots * docs(table): demos * fix(table): sort highlight * fix(table): remove duplicate resizable * feat(table): support dynamic treeNodeColumnIndex --- src/_common | 2 +- src/table/_example/base.vue | 30 +- src/table/_example/filter-controlled.vue | 10 +- src/table/_example/merge-cells.vue | 3 - src/table/_example/multi-header.vue | 4 +- src/table/_example/select-single.vue | 2 + src/table/_example/single-sort.vue | 6 + src/table/_example/tree.vue | 4 +- src/table/base-table-props.ts | 5 + src/table/base-table.tsx | 139 ++- src/table/filter-controller.tsx | 10 +- src/table/hooks/useAffix.ts | 2 +- src/table/hooks/useClassName.ts | 2 + src/table/hooks/useDragSort.ts | 2 + src/table/hooks/useRowExpand.tsx | 2 +- src/table/hooks/useRowSelect.tsx | 3 +- src/table/hooks/useTableHeader.tsx | 5 +- src/table/hooks/useTreeData.tsx | 5 +- src/table/primary-table-props.ts | 2 + src/table/primary-table.tsx | 16 +- src/table/table.en-US.md | 5 +- src/table/table.md | 9 +- src/table/thead.tsx | 6 +- src/table/tr.tsx | 16 +- src/table/type.ts | 28 +- src/table/utils.ts | 26 +- test/snap/__snapshots__/csr.test.js.snap | 1331 ++++++++++++---------- test/snap/__snapshots__/ssr.test.js.snap | 75 +- 28 files changed, 999 insertions(+), 751 deletions(-) diff --git a/src/_common b/src/_common index c2ce10482c..9c398aba70 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit c2ce10482c4f4998557a895cb3c4f57ce9da3cf8 +Subproject commit 9c398aba703762954df2bd3644dbc30db4315393 diff --git a/src/table/_example/base.vue b/src/table/_example/base.vue index 89b7438617..147366ac56 100644 --- a/src/table/_example/base.vue +++ b/src/table/_example/base.vue @@ -1,18 +1,19 @@ diff --git a/src/table/_example/multi-header.vue b/src/table/_example/multi-header.vue index bac28b8b0b..2fc7a608b8 100644 --- a/src/table/_example/multi-header.vue +++ b/src/table/_example/multi-header.vue @@ -2,7 +2,7 @@
-
+ 显示表格边框 显示固定表头 @@ -10,7 +10,7 @@ 固定左侧列 固定右侧列 表头吸顶 -
+ diff --git a/src/table/_example/select-single.vue b/src/table/_example/select-single.vue index 3f49ba642b..dd3fe10838 100644 --- a/src/table/_example/select-single.vue +++ b/src/table/_example/select-single.vue @@ -29,6 +29,8 @@ import { ref } from 'vue'; const columns = [ { + // title: '单选', + // align: 'center', colKey: 'row-select', type: 'single', // 允许单选(Radio)取消行选中 diff --git a/src/table/_example/single-sort.vue b/src/table/_example/single-sort.vue index 8809994e61..387dd88a04 100644 --- a/src/table/_example/single-sort.vue +++ b/src/table/_example/single-sort.vue @@ -22,6 +22,7 @@ :data="data" :sort="sort" :hide-sort-tips="hideSortTips" + :show-sort-column-bg-color="true" bordered @sort-change="sortChange" @change="onChange" @@ -46,6 +47,11 @@ const columns = [ width: 100, sortType: 'all', sorter: true, + // 自定义列,或单元格类名 + // className: (params) => { + // console.log(params); + // return 'status-class-bg'; + // }, }, { colKey: 'survivalTime', diff --git a/src/table/_example/tree.vue b/src/table/_example/tree.vue index 7eadfd1202..6fadf7f8bf 100644 --- a/src/table/_example/tree.vue +++ b/src/table/_example/tree.vue @@ -25,7 +25,7 @@ drag-sort="row-handler" :data="data" :columns="columns" - :tree="{ childrenKey: 'list', treeNodeColumnIndex: 2, indent: 25 }" + :tree="treeConfig" :tree-expand-and-fold-icon="treeExpandIcon" :pagination="pagination" :before-drag-sort="beforeDragSort" @@ -128,6 +128,8 @@ const table = ref(null); const data = ref(getData()); const lazyLoadingData = ref(null); +const treeConfig = reactive({ childrenKey: 'list', treeNodeColumnIndex: 2, indent: 25 }); + const resetData = () => { // 需要更新数据地址空间 const newData = getData(); diff --git a/src/table/base-table-props.ts b/src/table/base-table-props.ts index c84bedf840..3ced9c1bbe 100644 --- a/src/table/base-table-props.ts +++ b/src/table/base-table-props.ts @@ -138,6 +138,11 @@ export default { scroll: { type: Object as PropType, }, + /** 是否显示表头 */ + showHeader: { + type: Boolean, + default: true, + }, /** 表格尺寸 */ size: { type: String as PropType, diff --git a/src/table/base-table.tsx b/src/table/base-table.tsx index 28ae557095..07d2873d29 100644 --- a/src/table/base-table.tsx +++ b/src/table/base-table.tsx @@ -302,6 +302,54 @@ export default defineComponent({ } const defaultColWidth = this.tableLayout === 'fixed' && this.isWidthOverflow ? '100px' : undefined; + const renderColGroup = () => ( + + {columns.map((col) => { + const style: Styles = { + width: formatCSSUnit(this.thWidthList[col.colKey] || col.width) || defaultColWidth, + }; + if (col.minWidth) { + style.minWidth = formatCSSUnit(col.minWidth); + } + return ; + })} + + ); + + const renderAffixedHeader = () => { + if (this.showHeader === false) return null; + return ( + !!(this.isVirtual || this.headerAffixedTop) && + (this.headerAffixedTop ? ( + + {affixHeaderWithWrap} + + ) : ( + this.isFixedHeader && affixHeaderWithWrap + )) + ); + }; + + const renderAffixedHorizontalScrollbar = () => ( + +
+
+
+
+ ); + /** * Affixed Header */ @@ -332,17 +380,7 @@ export default defineComponent({ > {/* 此处和 Vue2 不同,Vue3 里面必须每一处单独写 */} - - {columns.map((col) => { - const style: Styles = { - width: formatCSSUnit(this.thWidthList[col.colKey] || col.width) || defaultColWidth, - }; - if (col.minWidth) { - style.minWidth = formatCSSUnit(col.minWidth); - } - return ; - })} - + {renderColGroup()}
{/* 此处和 Vue2 不同,Vue3 里面必须每一处单独写 */} - - {columns.map((col) => { - const style: Styles = { - width: formatCSSUnit(this.thWidthList[col.colKey] || col.width) || defaultColWidth, - }; - if (col.minWidth) { - style.minWidth = formatCSSUnit(col.minWidth); - } - return ; - })} - + {renderColGroup()} }
- - {columns.map((col) => { - const style: Styles = { - width: formatCSSUnit(this.thWidthList[col.colKey] || col.width) || defaultColWidth, - }; - if (col.minWidth) { - style.minWidth = formatCSSUnit(col.minWidth); - } - return ; - })} - - + {renderColGroup()} + {this.showHeader && ( + + )} {!!topContent &&
{topContent}
} - {!!(this.isVirtual || this.headerAffixedTop) && - (this.headerAffixedTop ? ( - - {affixHeaderWithWrap} - - ) : ( - this.isFixedHeader && affixHeaderWithWrap - ))} + {renderAffixedHeader()} {tableContent} @@ -556,25 +569,7 @@ export default defineComponent({ {bottom} {/* 吸底的滚动条 */} - {this.horizontalScrollAffixedBottom && ( - -
-
-
-
- )} + {this.horizontalScrollAffixedBottom && renderAffixedHorizontalScrollbar()} {/* 吸底的分页器 */} {this.paginationAffixedBottom ? ( diff --git a/src/table/filter-controller.tsx b/src/table/filter-controller.tsx index 5a5feb4e5b..ac78d54867 100644 --- a/src/table/filter-controller.tsx +++ b/src/table/filter-controller.tsx @@ -152,6 +152,9 @@ export default defineComponent({ if (!column.filter || (column.filter && !Object.keys(column.filter).length)) return null; const defaultFilterIcon = this.t(this.globalConfig.filterIcon) || ; + const filterValue = this.tFilterValue?.[column.colKey]; + const isObjectTrue = typeof filterValue === 'object' && !isEmpty(filterValue); + const isValueTrue = filterValue && typeof filterValue !== 'object'; return ( this.primaryTableElement as HTMLElement : undefined} @@ -162,7 +165,12 @@ export default defineComponent({ showArrow overlayClassName={this.tableFilterClasses.popup} onVisibleChange={(val: boolean) => this.onFilterPopupVisibleChange(val)} - class={[this.tableFilterClasses.icon, { [this.isFocusClass]: !isEmpty(this.tFilterValue?.[column.colKey]) }]} + class={[ + this.tableFilterClasses.icon, + { + [this.isFocusClass]: isObjectTrue || isValueTrue, + }, + ]} content={() => (
{getFilterContent(column)} diff --git a/src/table/hooks/useAffix.ts b/src/table/hooks/useAffix.ts index ff2b8bce91..1fe9b67e2b 100644 --- a/src/table/hooks/useAffix.ts +++ b/src/table/hooks/useAffix.ts @@ -74,7 +74,7 @@ export default function useAffix(props: TdBaseTableProps) { if (!isAffixed.value && !isVirtualScroll.value) return; const pos = tableContentRef.value?.getBoundingClientRect(); const headerRect = tableContentRef.value?.querySelector('thead')?.getBoundingClientRect(); - const headerHeight = headerRect.height || 0; + const headerHeight = headerRect?.height || 0; const footerRect = affixFooterRef.value?.getBoundingClientRect(); if ((props.headerAffixedTop || isVirtualScroll.value) && affixHeaderRef.value) { const offsetTop = getOffsetTop(props.headerAffixProps || props.headerAffixedTop); diff --git a/src/table/hooks/useClassName.ts b/src/table/hooks/useClassName.ts index 0a0895abec..f253e3cd34 100644 --- a/src/table/hooks/useClassName.ts +++ b/src/table/hooks/useClassName.ts @@ -114,6 +114,7 @@ export default function useClassName() { // 排序功能,全部类名 tableSortClasses: { sortable: `${classPrefix.value}-table__cell--sortable`, + sortColumn: `${classPrefix.value}-table__sort-column`, title: `${classPrefix.value}-table__cell--title`, trigger: `${classPrefix.value}-table__cell--sort-trigger`, doubleIcon: `${classPrefix.value}-table__double-icons`, @@ -157,6 +158,7 @@ export default function useClassName() { col: `${classPrefix.value}-table__tree-col`, inlineCol: `${classPrefix.value}-table__tree-col--inline`, icon: `${classPrefix.value}-table__tree-op-icon`, + leafNode: `${classPrefix.value}-table__tree-leaf-node`, }, // 拖拽功能类名 diff --git a/src/table/hooks/useDragSort.ts b/src/table/hooks/useDragSort.ts index 8fa2aec558..e74e24d440 100644 --- a/src/table/hooks/useDragSort.ts +++ b/src/table/hooks/useDragSort.ts @@ -93,6 +93,7 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo }, }; + if (!dragContainer) return; if (isRowDraggable.value) { dragInstanceTmp = new Sortable(dragContainer, { ...baseOptions }); } else { @@ -152,6 +153,7 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo props.onDragSort?.(params); }, }; + if (!container) return; dragInstanceTmp = new Sortable(container, options); return dragInstanceTmp; }; diff --git a/src/table/hooks/useRowExpand.tsx b/src/table/hooks/useRowExpand.tsx index 10767b3bb7..1137af85d7 100644 --- a/src/table/hooks/useRowExpand.tsx +++ b/src/table/hooks/useRowExpand.tsx @@ -86,7 +86,7 @@ export default function useRowExpand(props: TdPrimaryTableProps, context: SetupC p: TableExpandedRowParams & { tableWidth: number; isWidthOverflow: boolean }, ) => { const rowId = get(p.row, props.rowKey || 'id'); - if (tExpandedRowKeys?.value || !tExpandedRowKeys.value.includes(rowId)) return null; + if (!tExpandedRowKeys.value || !tExpandedRowKeys.value.includes(rowId)) return null; const isFixedLeft = p.isWidthOverflow && props.columns.find((item) => item.fixed === 'left'); return (
diff --git a/src/table/hooks/useRowSelect.tsx b/src/table/hooks/useRowSelect.tsx index 1a42b2f98e..d3bc4f6228 100644 --- a/src/table/hooks/useRowSelect.tsx +++ b/src/table/hooks/useRowSelect.tsx @@ -116,7 +116,6 @@ export default function useRowSelect( let selectedRowKeys = [...tSelectedRowKeys.value]; const reRowKey = props.rowKey || 'id'; const id = get(row, reRowKey); - selectedRowDataMap.value.set(id, row); const selectedRowIndex = selectedRowKeys.indexOf(id); const isExisted = selectedRowIndex !== -1; if (selectColumn.value.type === 'multiple') { @@ -155,7 +154,7 @@ export default function useRowSelect( width: col.width || 64, className: [tableSelectedClasses.checkCell, col.className], cell: (_: typeof h, p: PrimaryTableCellParams) => renderSelectCell(p), - title: col.type === 'multiple' ? getSelectedHeader() : '', + title: col.type === 'multiple' ? getSelectedHeader() : col.title, }; } diff --git a/src/table/hooks/useTableHeader.tsx b/src/table/hooks/useTableHeader.tsx index 4a67fcfbc6..501312ca05 100644 --- a/src/table/hooks/useTableHeader.tsx +++ b/src/table/hooks/useTableHeader.tsx @@ -50,12 +50,13 @@ export default function useTableHeader(props: TdBaseTableProps) { [tableFilterClasses.filterable]: filterIcon, }; const content = isFunction(ellipsisTitle) ? ellipsisTitle(h, { col, colIndex }) : undefined; + const isEllipsis = ellipsisTitle !== undefined ? Boolean(ellipsisTitle) : Boolean(col.ellipsis); return (
- {col.ellipsis && ellipsisTitle !== false && ellipsisTitle !== null ? ( + {isEllipsis ? ( attach : undefined} tooltipContent={content && (() => content)} tooltipProps={typeof ellipsisTitle === 'object' ? ellipsisTitle : undefined} diff --git a/src/table/hooks/useTreeData.tsx b/src/table/hooks/useTreeData.tsx index 1726b44837..96a470a7c4 100644 --- a/src/table/hooks/useTreeData.tsx +++ b/src/table/hooks/useTreeData.tsx @@ -93,7 +93,7 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC }); watch( - [columns], + () => [columns, props.tree?.treeNodeColumnIndex], () => { treeNodeCol.value = getTreeNodeColumnCol(); }, @@ -172,7 +172,8 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC ); } return ( -
+
+ {cellInfo}
); diff --git a/src/table/primary-table-props.ts b/src/table/primary-table-props.ts index ce499bf451..e67705a45f 100644 --- a/src/table/primary-table-props.ts +++ b/src/table/primary-table-props.ts @@ -116,6 +116,8 @@ export default { type: Array as PropType, default: (): TdPrimaryTableProps['defaultSelectedRowKeys'] => [], }, + /** 当前排序列是否显示背景色 */ + showSortColumnBgColor: Boolean, /** 排序控制。sortBy 排序字段;descending 是否进行降序排列。值为数组时,表示正进行多字段排序 */ sort: { type: [Object, Array] as PropType, diff --git a/src/table/primary-table.tsx b/src/table/primary-table.tsx index b0437ed2e1..90ff1c779e 100644 --- a/src/table/primary-table.tsx +++ b/src/table/primary-table.tsx @@ -1,6 +1,7 @@ import { computed, defineComponent, toRefs, h, ref, onMounted, SetupContext } from 'vue'; import get from 'lodash/get'; import omit from 'lodash/omit'; +import isFunction from 'lodash/isFunction'; import baseTableProps from './base-table-props'; import primaryTableProps from './primary-table-props'; import BaseTable from './base-table'; @@ -65,7 +66,7 @@ export default defineComponent({ const renderTNode = useTNodeJSX(); const { columns, columnController } = toRefs(props); const primaryTableRef = ref(null); - const { tableDraggableClasses, tableBaseClass, tableSelectedClasses } = useClassName(); + const { tableDraggableClasses, tableBaseClass, tableSelectedClasses, tableSortClasses } = useClassName(); // 自定义列配置功能 const { tDisplayColumns, renderColumnController } = useColumnController(props, context); // 展开/收起行功能 @@ -144,6 +145,19 @@ export default defineComponent({ const isDisplayColumn = item.children?.length || tDisplayColumns.value?.includes(item.colKey); if (!isDisplayColumn && props.columnController) continue; item = formatToRowSelectColumn(item); + const { sort } = props; + if (item.sorter && props.showSortColumnBgColor) { + const sorts = sort instanceof Array ? sort : [sort]; + const sortedColumn = sorts.find( + (sort) => sort && sort.sortBy === item.colKey && sort.descending !== undefined, + ); + if (sortedColumn) { + item.className = + item.className instanceof Array + ? item.className.concat(tableSortClasses.sortColumn) + : [item.className, tableSortClasses.sortColumn]; + } + } // 添加排序图标和过滤图标 if (item.sorter || item.filter) { const titleContent = renderTitle(context.slots, item, i); diff --git a/src/table/table.en-US.md b/src/table/table.en-US.md index c09b1038c3..3285ff9d38 100644 --- a/src/table/table.en-US.md +++ b/src/table/table.en-US.md @@ -37,6 +37,7 @@ rowKey | String | 'id' | required。unique key for each row data | Y rowspanAndColspan | Function | - | rowspan and colspan。Typescript:`TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N rowspanAndColspanInFooter | Function | - | rowspan and colspan for footer。Typescript:`TableRowspanAndColspanFunc` | N scroll | Object | - | lazy load and virtual scroll。Typescript:`TableScroll` | N +showHeader | Boolean | true | show table header | N size | String | medium | options:small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N stripe | Boolean | false | show stripe style | N tableContentWidth | String | - | \- | N @@ -81,7 +82,7 @@ align | String | left | align type。options:left/right/center | N attrs | Object | - | html attributes | N cell | String / Function | - | use cell to render table cell。Typescript:`string | TNode>` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N children | Array | - | grouping table head。Typescript:`Array>` | N -className | String / Object / Array / Function | - | cell classnames。Typescript:`ClassName | ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' | 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N +className | String / Object / Array / Function | - | cell classnames。Typescript:`TableColumnClassName | TableColumnClassName[]` `type TableColumnClassName = ClassName | ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' | 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N colKey | String | - | unique key for column | N ellipsis | Boolean / Object / Slot / Function | false | ellipsis cell content。Typescript:`boolean | TNode> | TooltipProps`,[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N ellipsisTitle | Boolean / Object / Slot / Function | undefined | ellipsis title content。Typescript:`boolean | TNode> | TooltipProps` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N @@ -89,6 +90,7 @@ fixed | String | left | fixed current column to left or right。options:left/r foot | String / Function | - | tfoot content。Typescript:`string | TNode<{ col: BaseTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N minWidth | String / Number | - | add CSS property `min-width` to HTML Element `
`,Browsers with [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) support `minWidth` | N render | Function | - | render function can be used to render cell or head。Typescript:`TNode>` `interface BaseTableRenderParams extends BaseTableCellParams { type: RenderType }` `type RenderType = 'cell' | 'title'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N +resizable | Boolean | true | resize current column width | N resize | Object | - | Typescript:`TableColumnResizeConfig` `interface TableColumnResizeConfig { minWidth: number; maxWidth: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N title | String / Function | - | th content。Typescript:`string | TNode<{ col: BaseTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N width | String / Number | - | column width | N @@ -122,6 +124,7 @@ indeterminateSelectedRowKeys | Array | - | indeterminate selected row keys, row multipleSort | Boolean | false | support multiple column fields sort | N selectedRowKeys | Array | [] | selected row keys, row key is from data[rowKey]。`v-model:selectedRowKeys` is supported。Typescript:`Array` | N defaultSelectedRowKeys | Array | [] | selected row keys, row key is from data[rowKey]。uncontrolled property。Typescript:`Array` | N +showSortColumnBgColor | Boolean | false | column shows sort bg color | N sort | Object / Array | - | sort configs。`v-model:sort` is supported。Typescript:`TableSort` `type TableSort = SortInfo | Array` `interface SortInfo { sortBy: string; descending: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N defaultSort | Object / Array | - | sort configs。uncontrolled property。Typescript:`TableSort` `type TableSort = SortInfo | Array` `interface SortInfo { sortBy: string; descending: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N sortIcon | Slot / Function | - | sort icon。Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N diff --git a/src/table/table.md b/src/table/table.md index 75286134af..1b7f8ac769 100644 --- a/src/table/table.md +++ b/src/table/table.md @@ -37,6 +37,7 @@ rowKey | String | 'id' | 必需。使用 rowKey 唯一标识一行数据 | Y rowspanAndColspan | Function | - | 用于自定义合并单元格,泛型 T 指表格数据类型。示例:`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型:`TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N rowspanAndColspanInFooter | Function | - | 用于自定义表尾的合并单元格,泛型 T 指表格数据类型。示例:`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型:`TableRowspanAndColspanFunc` | N scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化,当数据量小于阈值 `scroll.threshold` 时,无论虚拟滚动的配置是否存在,组件内部都不会开启虚拟滚动,`scroll.threshold` 默认为 `100`。TS 类型:`TableScroll` | N +showHeader | Boolean | true | 是否显示表头 | N size | String | medium | 表格尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N stripe | Boolean | false | 是否显示斑马纹 | N tableContentWidth | String | - | 表格内容的总宽度,注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度 | N @@ -81,14 +82,15 @@ align | String | left | 列横向对齐方式。可选项:left/right/center | attrs | Object | - | 透传 HTML 属性到列元素 | N cell | String / Function | - | 自定义单元格渲染。值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染,插槽名称为 cell 的值。默认使用 colKey 作为插槽名称。优先级高于 render。泛型 T 指表格数据类型。TS 类型:`string | TNode>` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N children | Array | - | 用于多级表头,泛型 T 指表格数据类型。TS 类型:`Array>` | N -className | String / Object / Array / Function | - | 列类名,值类型是 Function 使用返回值作为列类名;值类型不为 Function 时,值用于整列类名(含表头)。泛型 T 指表格数据类型。TS 类型:`ClassName | ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' | 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N -colKey | String | - | 渲染列所需字段 | N +className | String / Object / Array / Function | - | 列类名,值类型是 Function 使用返回值作为列类名;值类型不为 Function 时,值用于整列类名(含表头)。泛型 T 指表格数据类型。TS 类型:`TableColumnClassName | TableColumnClassName[]` `type TableColumnClassName = ClassName | ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' | 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N +colKey | String | - | 渲染列所需字段,值为 `serial-number` 表示当前列为「序号」列 | N ellipsis | Boolean / Object / Slot / Function | false | 单元格和表头内容超出时,是否显示省略号。如果仅希望单元格超出省略,可设置 `ellipsisTitle = false`。
值为 `true`,则浮层默认显示单元格内容;
值类型为 `Function` 则自定义浮层显示内容;
值类型为 `Object`,则自动透传属性到 Tooltip 组件,可用于调整浮层方向等特性。TS 类型:`boolean | TNode> | TooltipProps`,[Tooltip API Documents](./tooltip?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N ellipsisTitle | Boolean / Object / Slot / Function | undefined | 表头内容超出时,是否显示省略号。优先级高于 `ellipsis`。
值为 `true`,则浮层默认显示表头全部内容;
值类型为 `Function` 则自定义浮层显示表头内容;
值类型为 `Object`,则自动透传属性到 Tooltip 组件,可用于调整浮层方向等特性。TS 类型:`boolean | TNode> | TooltipProps` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N fixed | String | left | 固定列显示位置。可选项:left/right | N foot | String / Function | - | 自定义表尾表尾。值类型为 Function 表示以函数形式渲染表尾内容。值类型为 string 表示使用插槽渲染,插槽名称为 `foot` 值。TS 类型:`string | TNode<{ col: BaseTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N minWidth | String / Number | - | 透传 CSS 属性 `min-width` 到 `
` 元素。⚠️ 仅少部分浏览器支持,如:使用 [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) 渲染的 Chrome 浏览器支持 `minWidth` | N render | Function | - | 自定义表头或单元格,泛型 T 指表格数据类型。TS 类型:`TNode>` `interface BaseTableRenderParams extends BaseTableCellParams { type: RenderType }` `type RenderType = 'cell' | 'title'`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N +resizable | Boolean | true | 是否允许调整当前列列宽 | N resize | Object | - | 限制拖拽调整的最小宽度和最大宽度。`resize.minWidth` 默认为 `80`,`resize.maxWidth` 默认为 `600`。TS 类型:`TableColumnResizeConfig` `interface TableColumnResizeConfig { minWidth: number; maxWidth: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N title | String / Function | - | 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染,插槽名称为 title 的值。优先级高于 render。TS 类型:`string | TNode<{ col: BaseTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N width | String / Number | - | 列宽,可以作为最小宽度使用。当列宽总和小于 `table` 元素时,浏览器根据宽度设置情况自动分配宽度;当列宽总和大于 `table` 元素,表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果 | N @@ -122,6 +124,7 @@ indeterminateSelectedRowKeys | Array | - | 半选状态行。选中行请更为 multipleSort | Boolean | false | 是否支持多列排序 | N selectedRowKeys | Array | [] | 选中行,控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制。支持语法糖 `v-model:selectedRowKeys`。TS 类型:`Array` | N defaultSelectedRowKeys | Array | [] | 选中行,控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制。非受控属性。TS 类型:`Array` | N +showSortColumnBgColor | Boolean | false | 当前排序列是否显示背景色 | N sort | Object / Array | - | 排序控制。sortBy 排序字段;descending 是否进行降序排列。值为数组时,表示正进行多字段排序。支持语法糖 `v-model:sort`。TS 类型:`TableSort` `type TableSort = SortInfo | Array` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N defaultSort | Object / Array | - | 排序控制。sortBy 排序字段;descending 是否进行降序排列。值为数组时,表示正进行多字段排序。非受控属性。TS 类型:`TableSort` `type TableSort = SortInfo | Array` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N sortIcon | Slot / Function | - | 自定义排序图标,支持全局配置 `GlobalConfigProvider`。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N @@ -177,7 +180,7 @@ validateTableData | \- | \- | 必需。校验表格全部数据,校验完成 cell | String / Function | - | 自定义单元格渲染。值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染,插槽名称为 cell 的值。默认使用 colKey 作为插槽名称。优先级高于 render。泛型 T 指表格数据类型。TS 类型:`string | TNode>` `interface PrimaryTableCellParams { row: T; rowIndex: number; col: PrimaryTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N checkProps | Object / Function | - | 透传参数,`colKey` 值为 `row-select` 时,配置有效。具体定义参考 Checkbox 组件 和 Radio 组件。泛型 T 指表格数据类型。TS 类型:`CheckProps` `type CheckProps = CheckboxProps | RadioProps | ((options: { row: T; rowIndex: number }) => CheckboxProps | RadioProps)` `import { CheckboxProps } from '@Checkbox'`,[Radio API Documents](./radio?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N children | Array | - | 用于多级表头,泛型 T 指表格数据类型。TS 类型:`Array>` | N -colKey | String | - | 渲染列所需字段,必须唯一。值为 `row-select` 表示当前列为行选中操作列。值为 `drag` 表示当前列为拖拽排序操作列 | N +colKey | String | - | 渲染列所需字段,必须唯一。值为 `row-select` 表示当前列为行选中操作列。值为 `drag` 表示当前列为拖拽排序操作列。值为 `serial-number` 表示当前列列「序号」列 | N disabled | Function | - | 是否禁用行选中,`colKey` 值为 `row-select` 时,配置有效。TS 类型:`(options: {row: T; rowIndex: number }) => boolean` | N edit | Object | - | 可编辑单元格配置项,具体属性参考文档 `TableEditableCellConfig` 描述。TS 类型:`TableEditableCellConfig` | N filter | Object | - | 过滤规则,支持多选(multiple)、单选(single)、输入框(input) 等三种形式。想要自定义过滤组件,可通过 `filter.component` 实现,自定义过滤组件需要包含参数 value 和事件 change。更多信息请查看当前页面中 `TableColumnFilter` 的详细文档。TS 类型:`TableColumnFilter` | N diff --git a/src/table/thead.tsx b/src/table/thead.tsx index d11e502922..d47d3dfcd5 100644 --- a/src/table/thead.tsx +++ b/src/table/thead.tsx @@ -6,6 +6,7 @@ import { useConfig } from '../hooks/useConfig'; import { BaseTableCol, TableRowData } from './type'; import { renderTitle } from './hooks/useTableHeader'; import TEllipsis from './ellipsis'; +import { formatClassNames } from './utils'; import { RowAndColFixedPosition, BaseTableColumns, ThRowspanAndColspan } from './interface'; export interface TheadProps { @@ -92,7 +93,7 @@ export default defineComponent({ row: {}, rowIndex: -1, }; - const customClasses = isFunction(col.className) ? col.className({ ...colParams, type: 'th' }) : col.className; + const customClasses = formatClassNames(col.className, { ...colParams, type: 'th' }); const thClasses = [ thStyles.classes, customClasses, @@ -114,6 +115,7 @@ export default defineComponent({ } : {}; const content = isFunction(col.ellipsisTitle) ? col.ellipsisTitle(h, { col, colIndex: index }) : undefined; + const isEllipsis = col.ellipsisTitle !== undefined ? Boolean(col.ellipsisTitle) : Boolean(col.ellipsis); return (
- {col.ellipsis && col.ellipsisTitle !== false && col.ellipsisTitle !== null ? ( + {isEllipsis ? ( this.theadRef : undefined} diff --git a/src/table/tr.tsx b/src/table/tr.tsx index 946c8ee578..cc933745d0 100644 --- a/src/table/tr.tsx +++ b/src/table/tr.tsx @@ -15,7 +15,7 @@ import upperFirst from 'lodash/upperFirst'; import isString from 'lodash/isString'; import pick from 'lodash/pick'; import get from 'lodash/get'; -import { formatRowAttributes, formatRowClassNames } from './utils'; +import { formatClassNames, formatRowAttributes, formatRowClassNames } from './utils'; import { getRowFixedStyles, getColumnFixedStyles } from './hooks/useFixed'; import useClassName from './hooks/useClassName'; import TEllipsis from './ellipsis'; @@ -88,7 +88,11 @@ export function renderCell( cellEmptyContent?: TdBaseTableProps['cellEmptyContent']; }, ) { - const { col, row } = params; + const { col, row, rowIndex } = params; + // support serial number column + if (col.colKey === 'serial-number') { + return rowIndex + 1; + } if (isFunction(col.cell)) { return col.cell(h, params); } @@ -229,14 +233,12 @@ export default defineComponent({ methods: { renderEllipsisCell(cellParams: BaseTableCellParams, params: RenderEllipsisCellParams) { const { cellNode } = params; - const { col, colIndex } = cellParams; - // 前两列左对齐显示 - const placement = colIndex < 2 ? 'top-left' : 'top-right'; + const { col } = cellParams; const content = isFunction(col.ellipsis) ? col.ellipsis(h, cellParams) : undefined; const tableElement = this.tableElm as HTMLDivElement; return ( tableElement : undefined} tooltipContent={content && (() => content)} tooltipProps={typeof col.ellipsis === 'object' ? col.ellipsis : undefined} @@ -251,7 +253,7 @@ export default defineComponent({ const { cellSpans, dataLength, rowAndColFixedPosition } = extra; const cellNode = renderCell(params, this.tSlots, { cellEmptyContent: extra.cellEmptyContent }); const tdStyles = getColumnFixedStyles(col, colIndex, rowAndColFixedPosition, this.tableColFixedClasses); - const customClasses = isFunction(col.className) ? col.className({ ...params, type: 'td' }) : col.className; + const customClasses = formatClassNames(col.className, { ...params, type: 'td' }); const classes = [ tdStyles.classes, customClasses, diff --git a/src/table/type.ts b/src/table/type.ts index aca0429fda..80228b48c7 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -162,6 +162,11 @@ export interface TdBaseTableProps { * 懒加载和虚拟滚动。为保证组件收益最大化,当数据量小于阈值 `scroll.threshold` 时,无论虚拟滚动的配置是否存在,组件内部都不会开启虚拟滚动,`scroll.threshold` 默认为 `100` */ scroll?: TableScroll; + /** + * 是否显示表头 + * @default true + */ + showHeader?: boolean; /** * 表格尺寸 * @default medium @@ -264,9 +269,9 @@ export interface BaseTableCol { /** * 列类名,值类型是 Function 使用返回值作为列类名;值类型不为 Function 时,值用于整列类名(含表头)。泛型 T 指表格数据类型 */ - className?: ClassName | ((context: CellData) => ClassName); + className?: TableColumnClassName | TableColumnClassName[]; /** - * 渲染列所需字段 + * 渲染列所需字段,值为 `serial-number` 表示当前列为「序号」列 * @default '' */ colKey?: string; @@ -297,14 +302,14 @@ export interface BaseTableCol { */ render?: TNode>; /** - * 限制拖拽调整的最小宽度和最大宽度。`resize.minWidth` 默认为 `80`,`resize.maxWidth` 默认为 `600` - */ - resize?: TableColumnResizeConfig; - /** - * 是否允许拖拽调整该列大小,仅当 `table.resizable = true` 时生效 + * 是否允许调整当前列列宽 * @default true */ resizable?: boolean; + /** + * 限制拖拽调整的最小宽度和最大宽度。`resize.minWidth` 默认为 `80`,`resize.maxWidth` 默认为 `600` + */ + resize?: TableColumnResizeConfig; /** * 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染,插槽名称为 title 的值。优先级高于 render */ @@ -424,6 +429,11 @@ export interface TdPrimaryTableProps * @default [] */ defaultSelectedRowKeys?: Array; + /** + * 当前排序列是否显示背景色 + * @default false + */ + showSortColumnBgColor?: boolean; /** * 排序控制。sortBy 排序字段;descending 是否进行降序排列。值为数组时,表示正进行多字段排序 */ @@ -531,7 +541,7 @@ export interface PrimaryTableCol */ children?: Array>; /** - * 渲染列所需字段,必须唯一。值为 `row-select` 表示当前列为行选中操作列。值为 `drag` 表示当前列为拖拽排序操作列 + * 渲染列所需字段,必须唯一。值为 `row-select` 表示当前列为行选中操作列。值为 `drag` 表示当前列为拖拽排序操作列。值为 `serial-number` 表示当前列列「序号」列 * @default '' */ colKey?: string; @@ -890,6 +900,8 @@ export interface BaseTableCellParams { colIndex: number; } +export type TableColumnClassName = ClassName | ((context: CellData) => ClassName); + export interface CellData extends BaseTableCellParams { type: 'th' | 'td'; } diff --git a/src/table/utils.ts b/src/table/utils.ts index c04204790c..e2b4c0e123 100644 --- a/src/table/utils.ts +++ b/src/table/utils.ts @@ -1,7 +1,14 @@ import isFunction from 'lodash/isFunction'; import get from 'lodash/get'; import isObject from 'lodash/isObject'; -import { PrimaryTableCol, RowClassNameParams, TableRowData, TdBaseTableProps } from './type'; +import { + CellData, + PrimaryTableCol, + RowClassNameParams, + TableColumnClassName, + TableRowData, + TdBaseTableProps, +} from './type'; import { ClassName, HTMLElementAttributes } from '../common'; import { AffixProps } from '../affix'; @@ -69,6 +76,23 @@ export function formatRowClassNames( return customClasses; } +export function formatClassNames( + classNames: TableColumnClassName | TableColumnClassName[], + params: CellData, +) { + const classes = classNames instanceof Array ? classNames : [classNames]; + const arr: any[] = []; + for (let i = 0, len = classes.length; i < len; i++) { + const cls = classes[i]; + if (isFunction(cls)) { + arr.push(cls(params)); + } else { + arr.push(cls); + } + } + return arr; +} + export const INNER_PRE_NAME = '@@inner-'; export enum SCROLL_DIRECTION { diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index 02539963a6..98940d1b8f 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -40961,6 +40961,7 @@ exports[`csr snapshot test > csr test ./src/config-provider/_example/table.vue 1
@@ -41213,6 +41214,7 @@ exports[`csr snapshot test > csr test ./src/config-provider/_example/table.vue 1 expandedrow="h => { return __vite_ssr_import_0__.createVNode(\\"div\\", null, [__vite_ssr_import_0__.createTextVNode(\\"This is expanded row info\\")]); }" + showsortcolumnbgcolor="false" style="position: relative;" > @@ -107665,6 +107667,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/affix.vue 1`] = `
@@ -108480,6 +108483,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/async-loading.vue 1`]
@@ -108729,10 +108733,14 @@ exports[`csr snapshot test > csr test ./src/table/_example/async-loading.vue 1`] exports[`csr snapshot test > csr test ./src/table/_example/base.vue 1`] = `
- -
+ + +
@@ -108809,575 +108817,644 @@ exports[`csr snapshot test > csr test ./src/table/_example/base.vue 1`] = ` style="width: 0px; left: 0px;" />
-
-
-
- + + +
- -
- +
-
- - - - - - - - - - +
- - + - + + + + + + + + + + + - + - + - + - + - + + + + - - - - - - - + - - - - - - 否 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - 私有 - - + + + + + + + + - Number - - + + + + + + + + - - - - + + + + + + + + - 否 - - + + + + - + + + + + + - + - - - -
-
+
- 序号 - - -
+ 序号 +
+
- 平台 - - -
+ 平台 +
+
- 类型 - - -
+ 类型 +
+
- 默认值 - - -
+ 默认值 +
+
- 是否必传 - - -
+ 是否必传 +
+
- 详情信息 -
- -
- 5 - - 私有 - - Number - - 0 - +
-
- - 读取 5 个数据的嵌套信息值 - -
-
- 6 - - 共有 - - Array - - [] - - 否 - -
+
- - 读取 6 个数据的嵌套信息值 - - -
- 7 - - 私有 - - Object - - - - - 否 - -
+
- - 读取 7 个数据的嵌套信息值 - - -
- 8 - - 共有 - - String - - - - - 是 - -
+
- - 读取 8 个数据的嵌套信息值 - - -
- 9 - + + 否 + +
+ + 读取 5 个数据的嵌套信息值 + +
+
+ 2 + + 共有 + + Array + + [] + + 否 + +
+ + 读取 6 个数据的嵌套信息值 + +
+
+ 3 + + 私有 + + Object + + - + + 否 + +
+ + 读取 7 个数据的嵌套信息值 + +
+
+ 4 + + 共有 + + String + + - + + 是 + +
+ + 读取 8 个数据的嵌套信息值 + +
+
-
+ 5 +
+ 私有 + + Number + - - 读取 9 个数据的嵌套信息值 - - - + 否 + +
+ + 读取 9 个数据的嵌套信息值 + +
+
-
- - - - - -
+
+
+ + + + +
- 共 28 项数据 -
-
-
+ 共 28 项数据 +
+
+
-
- +
+ + + + +
+ + + 5 条/页 + - + + + + + +
- - - 5 条/页 - - - - - - -
+
- -
- -
- - - -
-
    - - - -
  • - 1 -
  • -
  • - 2 -
  • -
  • - 3 -
  • -
  • - 4 -
  • -
  • + + +
+ + +
- 6 - - + + + +
- - -
- - -
- -
+ - + + + `; @@ -109389,6 +109466,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/custom-cell.vue 1`] =
@@ -109623,6 +109701,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/custom-col.vue 1`] = class="t-table t-table--striped" columncontrollervisible="false" displaycolumns="index,needed,detail.position,platform,type,default" + showsortcolumnbgcolor="false" style="position: relative;" > @@ -110286,6 +110365,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/custom-col-button.vue
csr test ./src/table/_example/custom-footer.vue 1`]
@@ -111239,6 +111320,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/custom-header.vue 1`]
@@ -111430,6 +111512,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/data-sort.vue 1`] = `
@@ -111772,6 +111855,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/drag-col-sort.vue 1`]
@@ -112018,6 +112102,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/drag-sort.vue 1`] = `
@@ -112300,6 +112385,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/drag-sort-handler.vue
@@ -112636,6 +112722,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/editable-cell.vue 1`] // 第一行不允许编辑 return cellParams.rowIndex !== 0; }" + showsortcolumnbgcolor="false" style="position: relative;" > @@ -113248,6 +113335,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/editable-row.vue 1`]
@@ -113919,6 +114007,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/empty.vue 1`] = `
@@ -114050,6 +114139,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/empty.vue 1`] = `
@@ -114187,6 +114277,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/empty.vue 1`] = `
@@ -114485,6 +114576,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/expandable.vue 1`] = \\"class\\": \\"content\\" }, [row.description])])" expandedrowkeys="2" + showsortcolumnbgcolor="false" style="position: relative;" > @@ -115335,7 +115427,10 @@ exports[`csr snapshot test > csr test ./src/table/_example/filter-controlled.vue data-v-8850064e="" style="padding-left: 36px;" > - 已选筛选条件:{} + 已选筛选条件:{ + "lastName": [], + "createTime": [] +}
csr test ./src/table/_example/filter-controlled.vue class="t-table t-table--bordered" data-v-8850064e="" filtervalue="[object Object]" + showsortcolumnbgcolor="false" style="position: relative;" > @@ -116008,6 +116104,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/fixed-column.vue 1`]
@@ -116555,6 +116652,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/fixed-header.vue 1`]
@@ -117650,6 +117748,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/fixed-header-col.vue
@@ -118912,6 +119011,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/lazy.vue 1`] = `
@@ -128034,6 +128134,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/loading.vue 1`] = `
@@ -128226,6 +128327,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/loading.vue 1`] = `
@@ -128428,6 +128530,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/loading.vue 1`] = `
@@ -128632,7 +128735,8 @@ exports[`csr snapshot test > csr test ./src/table/_example/loading.vue 1`] = ` exports[`csr snapshot test > csr test ./src/table/_example/merge-cells.vue 1`] = `
@@ -128918,105 +129022,144 @@ exports[`csr snapshot test > csr test ./src/table/_example/multi-header.vue 1`] style="width: 100%;" > -
-
@@ -131120,6 +131263,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/multiple-sort.vue 1`]
@@ -131491,6 +131635,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/pagination.vue 1`] =
@@ -132081,6 +132226,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/pagination-ajax.vue 1
@@ -132401,6 +132547,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/select-multiple.vue 1 class="t-table" data-v-1119a7d2="" selectedrowkeys="" + showsortcolumnbgcolor="false" style="position: relative;" > @@ -132923,6 +133070,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/select-single.vue 1`] class="t-table" data-v-2dd73e0f="" selectedrowkeys="102" + showsortcolumnbgcolor="false" style="position: relative;" > @@ -132965,7 +133113,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/select-single.vue 1`]
- +
csr test ./src/table/_example/show-columns.vue 1`] class="t-table" data-v-058353a7="" show-columns="" + showsortcolumnbgcolor="false" style="position: relative;" > @@ -133801,6 +133950,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/single-sort.vue 1`] =
@@ -133846,7 +133996,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/single-sort.vue 1`] =
csr test ./src/table/_example/single-sort.vue 1`] = JQTest1

csr test ./src/table/_example/single-sort.vue 1`] = JQTest2 @@ -134084,7 +134234,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/single-sort.vue 1`] = JQTest3 @@ -134118,7 +134268,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/single-sort.vue 1`] = JQTest4

csr test ./src/table/_example/tree.vue 1`] = ` }" class="t-table t-table--row-handler-draggable" indeterminateselectedrowkeys="" + showsortcolumnbgcolor="false" style="position: relative;" tree="[object Object]" treeexpandandfoldicon="(h, params) => { @@ -135768,6 +135919,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] = expandedrowkeys="" indeterminateselectedrowkeys="" selectedrowkeys="" + showsortcolumnbgcolor="false" style="position: relative;" tree="[object Object]" > @@ -136437,6 +136589,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/virtual-scroll.vue 1` >

diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap index eed7fd6f9d..7b14c80e47 100644 --- a/test/snap/__snapshots__/ssr.test.js.snap +++ b/test/snap/__snapshots__/ssr.test.js.snap @@ -277,7 +277,7 @@ exports[`ssr snapshot test > ssr test ./src/config-provider/_example/pagination. exports[`ssr snapshot test > ssr test ./src/config-provider/_example/popconfirm.vue 1`] = `"
Drawer

This is a controlled drawer

"`; -exports[`ssr snapshot test > ssr test ./src/config-provider/_example/table.vue 1`] = `"
Type
Platform
Property
Empty Data


Type
Platform
Property
ArrayVue(PC)A
StringReact(PC)B
ObjectMiniprogramC


"`; +exports[`ssr snapshot test > ssr test ./src/config-provider/_example/table.vue 1`] = `"
Type
Platform
Property
Empty Data


Type
Platform
Property
ArrayVue(PC)A
StringReact(PC)B
ObjectMiniprogramC


"`; exports[`ssr snapshot test > ssr test ./src/date-picker/_example/base.vue 1`] = `"
"`; @@ -924,16 +924,16 @@ exports[`ssr snapshot test > ssr test ./src/switch/_example/size.vue 1`] = `" ssr test ./src/switch/_example/status.vue 1`] = `"
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/affix.vue 1`] = `"
序号
平台
类型
曝光
点击
点击率
默认值
是否必传
详情信息
操作
0共有String235245165312%-
读取 0 个数据的嵌套信息值
查看
1私有Number235245165312%0
读取 1 个数据的嵌套信息值
查看
2共有Array235245165312%[]
读取 2 个数据的嵌套信息值
查看
3私有Object235245165312%{}
读取 3 个数据的嵌套信息值
查看
4共有String235245165312%-
读取 4 个数据的嵌套信息值
查看
共 38 项数据
5 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/affix.vue 1`] = `"
序号
平台
类型
曝光
点击
点击率
默认值
是否必传
详情信息
操作
0共有String235245165312%-
读取 0 个数据的嵌套信息值
查看
1私有Number235245165312%0
读取 1 个数据的嵌套信息值
查看
2共有Array235245165312%[]
读取 2 个数据的嵌套信息值
查看
3私有Object235245165312%{}
读取 3 个数据的嵌套信息值
查看
4共有String235245165312%-
读取 4 个数据的嵌套信息值
查看
共 38 项数据
5 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/async-loading.vue 1`] = `"
FirstName
LastName
Email
EricSpinkeespinke0@apache.org
GilbertaPurvesgpurves1@issuu.com
HeribertoKmenthkment2@nsw.gov.au
LazarusSkureslskures3@apache.org
ZandraCrosonzcroson5@virginia.edu
正在加载中,请稍后
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/async-loading.vue 1`] = `"
FirstName
LastName
Email
EricSpinkeespinke0@apache.org
GilbertaPurvesgpurves1@issuu.com
HeribertoKmenthkment2@nsw.gov.au
LazarusSkureslskures3@apache.org
ZandraCrosonzcroson5@virginia.edu
正在加载中,请稍后
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/base.vue 1`] = `"


序号
平台
类型
默认值
是否必传
详情信息
5私有Number0
读取 5 个数据的嵌套信息值
6共有Array[]
读取 6 个数据的嵌套信息值
7私有Object-
读取 7 个数据的嵌套信息值
8共有String-
读取 8 个数据的嵌套信息值
9私有Number-
读取 9 个数据的嵌套信息值
共 28 项数据
5 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/base.vue 1`] = `"
序号
平台
类型
默认值
是否必传
详情信息
1私有Number0
读取 5 个数据的嵌套信息值
2共有Array[]
读取 6 个数据的嵌套信息值
3私有Object-
读取 7 个数据的嵌套信息值
4共有String-
读取 8 个数据的嵌套信息值
5私有Number-
读取 9 个数据的嵌套信息值
共 28 项数据
5 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/custom-cell.vue 1`] = `"
类型
平台
属性名
render
any[]公有(插槽自定义单元格)
使用 cell 方法自定义单元格:data
render 方法渲染单元格: 0-3
String公有(插槽自定义单元格)
使用 cell 方法自定义单元格:rowkey
render 方法渲染单元格: 1-3
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/custom-cell.vue 1`] = `"
类型
平台
属性名
render
any[]公有(插槽自定义单元格)
使用 cell 方法自定义单元格:data
render 方法渲染单元格: 0-3
String公有(插槽自定义单元格)
使用 cell 方法自定义单元格:rowkey
render 方法渲染单元格: 1-3
"`; exports[`ssr snapshot test > ssr test ./src/table/_example/custom-col.vue 1`] = ` -"
序号
平台
类型
默认值
是否必传
详情信息
0共有String-
读取 0 个数据的嵌套信息值
1私有Number0
读取 1 个数据的嵌套信息值
2共有Array[]
读取 2 个数据的嵌套信息值
3私有Object{}
读取 3 个数据的嵌套信息值
4共有String-
读取 4 个数据的嵌套信息值
共 100 项数据
5 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20
序号
平台
类型
默认值
是否必传
详情信息
0共有String-
读取 0 个数据的嵌套信息值
1私有Number0
读取 1 个数据的嵌套信息值
2共有Array[]
读取 2 个数据的嵌套信息值
3私有Object{}
读取 3 个数据的嵌套信息值
4共有String-
读取 4 个数据的嵌套信息值
共 100 项数据
5 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20


序号
平台
类型
默认值
是否必传
详情信息
0共有String-
读取 0 个数据的嵌套信息值
1私有Number0
读取 1 个数据的嵌套信息值
2共有Array[]
读取 2 个数据的嵌套信息值
3私有Object{}
读取 3 个数据的嵌套信息值
4共有String-
读取 4 个数据的嵌套信息值
共 100 项数据
5 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20


序号
平台
类型
默认值
是否必传
详情信息
0共有String-
读取 0 个数据的嵌套信息值
1私有Number0
读取 1 个数据的嵌套信息值
2共有Array[]
读取 2 个数据的嵌套信息值
3私有Object{}
读取 3 个数据的嵌套信息值
4共有String-
读取 4 个数据的嵌套信息值
共 100 项数据
5 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20
" `; -exports[`ssr snapshot test > ssr test ./src/table/_example/custom-footer.vue 1`] = `"
序号
平台
类型
默认值
是否必传
详情信息
0共有String-
读取 0 个数据的嵌套信息值
1私有Number0
读取 1 个数据的嵌套信息值
2共有Array[]
读取 2 个数据的嵌套信息值
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/custom-footer.vue 1`] = `"
序号
平台
类型
默认值
是否必传
详情信息
0共有String-
读取 0 个数据的嵌套信息值
1私有Number0
读取 1 个数据的嵌套信息值
2共有Array[]
读取 2 个数据的嵌套信息值
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/custom-header.vue 1`] = `"
类型
标题
属性名
标题是用插槽自定义标题使用 title 方法自定义data
插槽名称为 title 的值标题使用 title 方法自定义rowkey
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/custom-header.vue 1`] = `"
类型
标题
属性名
标题是用插槽自定义标题使用 title 方法自定义data
插槽名称为 title 的值标题使用 title 方法自定义rowkey
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/data-sort.vue 1`] = `"
排序方式:{}
集群名称
状态
存活时间(s)
JQTest1

健康

1000
JQTest2

警告

1000
JQTest3

异常

500
JQTest4

健康

1000
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/data-sort.vue 1`] = `"
排序方式:{}
集群名称
状态
存活时间(s)
JQTest1

健康

1000
JQTest2

警告

1000
JQTest3

异常

500
JQTest4

健康

1000
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/drag-col-sort.vue 1`] = `"
集群名称
状态
存活时间(s)
管理员
JQTest1

健康

1000jenny;peter
JQTest2

警告

1000jenny
JQTest3

异常

500jenny
JQTest4

警告

1500peter
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/drag-col-sort.vue 1`] = `"
集群名称
状态
存活时间(s)
管理员
JQTest1

健康

1000jenny;peter
JQTest2

警告

1000jenny
JQTest3

异常

500jenny
JQTest4

警告

1500peter
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/drag-sort.vue 1`] = `"
集群名称
状态
存活时间(s)
管理员
JQTest1

健康

1000jenny;peter
JQTest2

警告

1000jenny
JQTest3

异常

500jenny
JQTest4

警告

1500peter
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/drag-sort.vue 1`] = `"
集群名称
状态
存活时间(s)
管理员
JQTest1

健康

1000jenny;peter
JQTest2

警告

1000jenny
JQTest3

异常

500jenny
JQTest4

警告

1500peter
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/drag-sort-handler.vue 1`] = `"
排序
集群名称
状态
存活时间(s)
管理员
JQTest1

健康

1000jenny;peter
JQTest2

警告

1000jenny
JQTest3

异常

500jenny
JQTest4

警告

1500peter
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/drag-sort-handler.vue 1`] = `"
排序
集群名称
状态
存活时间(s)
管理员
JQTest1

健康

1000jenny;peter
JQTest2

警告

1000jenny
JQTest3

异常

500jenny
JQTest4

警告

1500peter
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/editable-cell.vue 1`] = `"
FirstName
Framework
Letters
Date
EricVue FrameworkA2021-11-01
React Framework
B、E
2021-12-01
Miniprogram Framework
C
2022-01-01
Flutter Framework
D、G、H
2022-02-01
Vue Framework
A
2021-11-01
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/editable-cell.vue 1`] = `"
FirstName
Framework
Letters
Date
EricVue FrameworkA2021-11-01
React Framework
B、E
2021-12-01
Miniprogram Framework
C
2022-01-01
Flutter Framework
D、G、H
2022-02-01
Vue Framework
A
2021-11-01
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/editable-row.vue 1`] = `"

FirstName
Framework
Letters
Date
Operate
Eric
Vue
A
Gilberta
React
B、E
2021-12-01
Heriberto
Miniprogram
C
2022-01-01
Lazarus
Flutter
D、G、H
2022-02-01
Eric
Vue
A
2021-11-01
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/editable-row.vue 1`] = `"

FirstName
Framework
Letters
Date
Operate
Eric
Vue
A
Gilberta
React
B、E
2021-12-01
Heriberto
Miniprogram
C
2022-01-01
Lazarus
Flutter
D、G、H
2022-02-01
Eric
Vue
A
2021-11-01
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/empty.vue 1`] = `"
类型
平台
属性
默认值
是否必传
说明
暂无数据


类型
平台
属性
默认值
是否必传
说明
😊 我是自定义的空内容 😊: slot


类型
平台
属性
默认值
是否必传
说明
😊 我是自定义的空内容 😊: empty function
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/empty.vue 1`] = `"
类型
平台
属性
默认值
是否必传
说明
暂无数据


类型
平台
属性
默认值
是否必传
说明
😊 我是自定义的空内容 😊: slot


类型
平台
属性
默认值
是否必传
说明
😊 我是自定义的空内容 😊: empty function
"`; exports[`ssr snapshot test > ssr test ./src/table/_example/expandable.vue 1`] = ` -"
集群名称
状态
管理员
描述
字段 1
字段 2
字段 3
字段 4
字段 5
字段 6

操作

JQTest1

健康

jenny;peterdescriptionfield1field2field3field4field5field6管理删除
JQTest2

异常

jenny;peterdescriptionfield1field2field3field4field5field6管理删除
JQTest3

健康

jenny;peterdescriptionfield1field2field3field4field5field6管理删除
JQTest4

异常

jenny;peterdescriptionfield1field2field3field4field5field6管理删除
JQTest5

健康

jenny;peterdescriptionfield1field2field3field4field5field6管理删除
集群名称
状态
管理员
描述
字段 1
字段 2
字段 3
字段 4
字段 5
字段 6

操作

JQTest1

健康

jenny;peterdescriptionfield1field2field3field4field5field6管理删除
JQTest2

异常

jenny;peterdescriptionfield1field2field3field4field5field6管理删除
JQTest3

健康

jenny;peterdescriptionfield1field2field3field4field5field6管理删除
JQTest4

异常

jenny;peterdescriptionfield1field2field3field4field5field6管理删除
JQTest5

健康

jenny;peterdescriptionfield1field2field3field4field5field6管理删除
已选筛选条件:{}
已选筛选条件:{ + "lastName": [], + "createTime": [] +}
FirstName
LastName
Email
Date
EricSpinkeespinke0@apache.org2021-11-01
GilbertaPurvesgpurves1@issuu.com2021-12-01
HeribertoKmenthkment2@nsw.gov.au2022-01-01
LazarusSkureslskures3@apache.org2022-02-01
EricSpinkeespinke0@apache.org2021-11-01
" + -->
FirstName
LastName
Email
Date
EricSpinkeespinke0@apache.org2021-11-01
GilbertaPurvesgpurves1@issuu.com2021-12-01
HeribertoKmenthkment2@nsw.gov.au2022-01-01
LazarusSkureslskures3@apache.org2022-02-01
EricSpinkeespinke0@apache.org2021-11-01
" `; -exports[`ssr snapshot test > ssr test ./src/table/_example/fixed-column.vue 1`] = `"
序号
平台
类型
默认值
说明
是否必传
操作
详情信息
0共有String-数据源删除
读取 0 个数据的嵌套信息值
1私有Number0数据源删除
读取 1 个数据的嵌套信息值
2共有Array[]数据源删除
读取 2 个数据的嵌套信息值
3私有Object{}数据源删除
读取 3 个数据的嵌套信息值
4共有String-数据源删除
读取 4 个数据的嵌套信息值
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/fixed-column.vue 1`] = `"
序号
平台
类型
默认值
说明
是否必传
操作
详情信息
0共有String-数据源删除
读取 0 个数据的嵌套信息值
1私有Number0数据源删除
读取 1 个数据的嵌套信息值
2共有Array[]数据源删除
读取 2 个数据的嵌套信息值
3私有Object{}数据源删除
读取 3 个数据的嵌套信息值
4共有String-数据源删除
读取 4 个数据的嵌套信息值
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/fixed-header.vue 1`] = `"




平台
类型
默认值
必传
详情信息
说明
共有String-
读取 0 个数据的嵌套信息值
数据源
私有Number0
读取 1 个数据的嵌套信息值
数据源
共有Array[]
读取 2 个数据的嵌套信息值
数据源
私有Object{}
读取 3 个数据的嵌套信息值
数据源
共有String-
读取 4 个数据的嵌套信息值
数据源
私有Number0
读取 5 个数据的嵌套信息值
数据源
共有Array[]
读取 6 个数据的嵌套信息值
数据源
私有Object{}
读取 7 个数据的嵌套信息值
数据源
共有String-
读取 8 个数据的嵌套信息值
数据源
私有Number0
读取 9 个数据的嵌套信息值
数据源
共有Array[]
读取 10 个数据的嵌套信息值
数据源
私有Object{}
读取 11 个数据的嵌套信息值
数据源
共有String-
读取 12 个数据的嵌套信息值
数据源
私有Number0
读取 13 个数据的嵌套信息值
数据源
共有Array[]
读取 14 个数据的嵌套信息值
数据源
私有Object{}
读取 15 个数据的嵌套信息值
数据源
共有String-
读取 16 个数据的嵌套信息值
数据源
私有Number0
读取 17 个数据的嵌套信息值
数据源
共有Array[]
读取 18 个数据的嵌套信息值
数据源
私有Object{}
读取 19 个数据的嵌套信息值
数据源
汇总Number(5)-否(6)-数据(10)
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/fixed-header.vue 1`] = `"




平台
类型
默认值
必传
详情信息
说明
共有String-
读取 0 个数据的嵌套信息值
数据源
私有Number0
读取 1 个数据的嵌套信息值
数据源
共有Array[]
读取 2 个数据的嵌套信息值
数据源
私有Object{}
读取 3 个数据的嵌套信息值
数据源
共有String-
读取 4 个数据的嵌套信息值
数据源
私有Number0
读取 5 个数据的嵌套信息值
数据源
共有Array[]
读取 6 个数据的嵌套信息值
数据源
私有Object{}
读取 7 个数据的嵌套信息值
数据源
共有String-
读取 8 个数据的嵌套信息值
数据源
私有Number0
读取 9 个数据的嵌套信息值
数据源
共有Array[]
读取 10 个数据的嵌套信息值
数据源
私有Object{}
读取 11 个数据的嵌套信息值
数据源
共有String-
读取 12 个数据的嵌套信息值
数据源
私有Number0
读取 13 个数据的嵌套信息值
数据源
共有Array[]
读取 14 个数据的嵌套信息值
数据源
私有Object{}
读取 15 个数据的嵌套信息值
数据源
共有String-
读取 16 个数据的嵌套信息值
数据源
私有Number0
读取 17 个数据的嵌套信息值
数据源
共有Array[]
读取 18 个数据的嵌套信息值
数据源
私有Object{}
读取 19 个数据的嵌套信息值
数据源
汇总Number(5)-否(6)-数据(10)
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/fixed-header-col.vue 1`] = `"
序号
平台
类型
默认值
详情信息
说明
必传
操作
0共有String-读取 0 个数据的嵌套信息值数据源删除
1私有Number0读取 1 个数据的嵌套信息值数据源删除
2共有Array[]读取 2 个数据的嵌套信息值数据源删除
3私有Object{}读取 3 个数据的嵌套信息值数据源删除
4共有String-读取 4 个数据的嵌套信息值数据源删除
5私有Number0读取 5 个数据的嵌套信息值数据源删除
6共有Array[]读取 6 个数据的嵌套信息值数据源删除
7私有Object{}读取 7 个数据的嵌套信息值数据源删除
8共有String-读取 8 个数据的嵌套信息值数据源删除
9私有Number0读取 9 个数据的嵌套信息值数据源删除
10共有Array[]读取 10 个数据的嵌套信息值数据源删除
11私有Object{}读取 11 个数据的嵌套信息值数据源删除
12共有String-读取 12 个数据的嵌套信息值数据源删除
13私有Number0读取 13 个数据的嵌套信息值数据源删除
14共有Array[]读取 14 个数据的嵌套信息值数据源删除
15私有Object{}读取 15 个数据的嵌套信息值数据源删除
16共有String-读取 16 个数据的嵌套信息值数据源删除
17私有Number0读取 17 个数据的嵌套信息值数据源删除
18共有Array[]读取 18 个数据的嵌套信息值数据源删除
19私有Object{}读取 19 个数据的嵌套信息值数据源删除
总述公有(5)Number(5)--数据(10)否(6)
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/fixed-header-col.vue 1`] = `"
序号
平台
类型
默认值
详情信息
说明
必传
操作
0共有String-读取 0 个数据的嵌套信息值数据源删除
1私有Number0读取 1 个数据的嵌套信息值数据源删除
2共有Array[]读取 2 个数据的嵌套信息值数据源删除
3私有Object{}读取 3 个数据的嵌套信息值数据源删除
4共有String-读取 4 个数据的嵌套信息值数据源删除
5私有Number0读取 5 个数据的嵌套信息值数据源删除
6共有Array[]读取 6 个数据的嵌套信息值数据源删除
7私有Object{}读取 7 个数据的嵌套信息值数据源删除
8共有String-读取 8 个数据的嵌套信息值数据源删除
9私有Number0读取 9 个数据的嵌套信息值数据源删除
10共有Array[]读取 10 个数据的嵌套信息值数据源删除
11私有Object{}读取 11 个数据的嵌套信息值数据源删除
12共有String-读取 12 个数据的嵌套信息值数据源删除
13私有Number0读取 13 个数据的嵌套信息值数据源删除
14共有Array[]读取 14 个数据的嵌套信息值数据源删除
15私有Object{}读取 15 个数据的嵌套信息值数据源删除
16共有String-读取 16 个数据的嵌套信息值数据源删除
17私有Number0读取 17 个数据的嵌套信息值数据源删除
18共有Array[]读取 18 个数据的嵌套信息值数据源删除
19私有Object{}读取 19 个数据的嵌套信息值数据源删除
总述公有(5)Number(5)--数据(10)否(6)
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/lazy.vue 1`] = `"


id
集群名称
存活时间(s)
管理员
1当前行高度2行,当前行高度2行,当前行高度2行,当前行高度2行1000jenny;peter
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/lazy.vue 1`] = `"


id
集群名称
存活时间(s)
管理员
1当前行高度2行,当前行高度2行,当前行高度2行,当前行高度2行1000jenny;peter
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/loading.vue 1`] = `"
类型
平台
属性
默认值
是否必传
说明
类型
平台
属性
默认值
是否必传
说明
这里使用插槽自定义加载状态
类型
平台
属性
默认值
是否必传
说明
这里使用渲染函数定义加载状态
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/loading.vue 1`] = `"
类型
平台
属性
默认值
是否必传
说明
类型
平台
属性
默认值
是否必传
说明
这里使用插槽自定义加载状态
类型
平台
属性
默认值
是否必传
说明
这里使用渲染函数定义加载状态
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/merge-cells.vue 1`] = `"
平台
类型
默认值
是否必传
说明
公有Array<any>[]Y
StringY描述
公有Y复杂类型
BooleanfalseY标识符
公有Array<any>-1数据源
String描述
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/merge-cells.vue 1`] = `"
平台
类型
默认值
是否必传
说明
公有Array<any>[]Y
StringY描述
公有Y复杂类型
BooleanfalseY标识符
公有Array<any>-1数据源
String描述
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/multi-header.vue 1`] = `"
序号
汇总属性
字段1
字段2
字段3
字段4
属性及说明
字段5
平台
类型及默认值
属性
说明
类型
默认值
是否必传
字段6
字段7
描述
0共有String0字段1字段2字段3字段4A字段6字段7
这是一段很长很长很长的文本
字段5
1私有Number1字段1字段2字段3字段4B字段6字段7
这是一段很长很长很长的文本
字段5
2共有Array2字段1字段2字段3字段4C字段6字段7
这是一段很长很长很长的文本
字段5
3私有Object3字段1字段2字段3字段4A字段6字段7
这是一段很长很长很长的文本
字段5
4共有String4字段1字段2字段3字段4B字段6字段7
这是一段很长很长很长的文本
字段5
5私有Number5字段1字段2字段3字段4C字段6字段7
这是一段很长很长很长的文本
字段5
6共有Array6字段1字段2字段3字段4A字段6字段7
这是一段很长很长很长的文本
字段5
7私有Object7字段1字段2字段3字段4B字段6字段7
这是一段很长很长很长的文本
字段5
8共有String8字段1字段2字段3字段4C字段6字段7
这是一段很长很长很长的文本
字段5
9私有Number9字段1字段2字段3字段4A字段6字段7
这是一段很长很长很长的文本
字段5
10共有Array10字段1字段2字段3字段4B字段6字段7
这是一段很长很长很长的文本
字段5
11私有Object11字段1字段2字段3字段4C字段6字段7
这是一段很长很长很长的文本
字段5
12共有String12字段1字段2字段3字段4A字段6字段7
这是一段很长很长很长的文本
字段5
13私有Number13字段1字段2字段3字段4B字段6字段7
这是一段很长很长很长的文本
字段5
14共有Array14字段1字段2字段3字段4C字段6字段7
这是一段很长很长很长的文本
字段5
15私有Object15字段1字段2字段3字段4A字段6字段7
这是一段很长很长很长的文本
字段5
16共有String16字段1字段2字段3字段4B字段6字段7
这是一段很长很长很长的文本
字段5
17私有Number17字段1字段2字段3字段4C字段6字段7
这是一段很长很长很长的文本
字段5
18共有Array18字段1字段2字段3字段4A字段6字段7
这是一段很长很长很长的文本
字段5
19私有Object19字段1字段2字段3字段4B字段6字段7
这是一段很长很长很长的文本
字段5
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/multi-header.vue 1`] = `"
序号
汇总属性
字段1
字段2
字段3
字段4
属性及说明
字段5
平台
类型及默认值
属性
说明
类型
默认值
是否必传
字段6
字段7
描述
0共有String0字段1字段2字段3字段4A字段6字段7
这是一段很长很长很长的文本
字段5
1私有Number1字段1字段2字段3字段4B字段6字段7
这是一段很长很长很长的文本
字段5
2共有Array2字段1字段2字段3字段4C字段6字段7
这是一段很长很长很长的文本
字段5
3私有Object3字段1字段2字段3字段4A字段6字段7
这是一段很长很长很长的文本
字段5
4共有String4字段1字段2字段3字段4B字段6字段7
这是一段很长很长很长的文本
字段5
5私有Number5字段1字段2字段3字段4C字段6字段7
这是一段很长很长很长的文本
字段5
6共有Array6字段1字段2字段3字段4A字段6字段7
这是一段很长很长很长的文本
字段5
7私有Object7字段1字段2字段3字段4B字段6字段7
这是一段很长很长很长的文本
字段5
8共有String8字段1字段2字段3字段4C字段6字段7
这是一段很长很长很长的文本
字段5
9私有Number9字段1字段2字段3字段4A字段6字段7
这是一段很长很长很长的文本
字段5
10共有Array10字段1字段2字段3字段4B字段6字段7
这是一段很长很长很长的文本
字段5
11私有Object11字段1字段2字段3字段4C字段6字段7
这是一段很长很长很长的文本
字段5
12共有String12字段1字段2字段3字段4A字段6字段7
这是一段很长很长很长的文本
字段5
13私有Number13字段1字段2字段3字段4B字段6字段7
这是一段很长很长很长的文本
字段5
14共有Array14字段1字段2字段3字段4C字段6字段7
这是一段很长很长很长的文本
字段5
15私有Object15字段1字段2字段3字段4A字段6字段7
这是一段很长很长很长的文本
字段5
16共有String16字段1字段2字段3字段4B字段6字段7
这是一段很长很长很长的文本
字段5
17私有Number17字段1字段2字段3字段4C字段6字段7
这是一段很长很长很长的文本
字段5
18共有Array18字段1字段2字段3字段4A字段6字段7
这是一段很长很长很长的文本
字段5
19私有Object19字段1字段2字段3字段4B字段6字段7
这是一段很长很长很长的文本
字段5
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/multiple-sort.vue 1`] = `"
排序方式:[{"sortBy":"status","descending":true},{"sortBy":"survivalTime","descending":false}]
集群名称
状态
存活时间(s)
管理员
JQTest1

健康

1000jenny;peter
JQTest2

警告

1000jenny
JQTest3

异常

500jenny
JQTest4

警告

1500peter
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/multiple-sort.vue 1`] = `"
排序方式:[{"sortBy":"status","descending":true},{"sortBy":"survivalTime","descending":false}]
集群名称
状态
存活时间(s)
管理员
JQTest1

健康

1000jenny;peter
JQTest2

警告

1000jenny
JQTest3

异常

500jenny
JQTest4

警告

1500peter
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/pagination.vue 1`] = `"
序号
平台
类型
默认值
是否必传
详情信息
说明
5私有Number0
读取 5 个数据的嵌套信息值
数据源
6共有Array[]
读取 6 个数据的嵌套信息值
数据源
7私有Object{}
读取 7 个数据的嵌套信息值
数据源
8共有String-
读取 8 个数据的嵌套信息值
数据源
9私有Number0
读取 9 个数据的嵌套信息值
数据源
共 60 项数据
5 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 12
跳至
/ 12 页
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/pagination.vue 1`] = `"
序号
平台
类型
默认值
是否必传
详情信息
说明
5私有Number0
读取 5 个数据的嵌套信息值
数据源
6共有Array[]
读取 6 个数据的嵌套信息值
数据源
7私有Object{}
读取 7 个数据的嵌套信息值
数据源
8共有String-
读取 8 个数据的嵌套信息值
数据源
9私有Number0
读取 9 个数据的嵌套信息值
数据源
共 60 项数据
5 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 12
跳至
/ 12 页
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/pagination-ajax.vue 1`] = `"
UNKNOWN_USER
联系方式
邮箱
暂无数据
共 0 项数据
10 条/页
  • 1
跳至
/ 1 页
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/pagination-ajax.vue 1`] = `"
UNKNOWN_USER
联系方式
邮箱
暂无数据
共 0 项数据
10 条/页
  • 1
跳至
/ 1 页
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/select-multiple.vue 1`] = `"
集群名称
状态
管理员
描述

操作

JQTest1

健康

jenny;petertest管理删除
JQTest2

异常

jenny;petertest管理删除
JQTest3

健康

jenny;petertest管理删除
JQTest4

异常

jenny;petertest管理删除
JQTest5

健康

jenny;petertest管理删除
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/select-multiple.vue 1`] = `"
集群名称
状态
管理员
描述

操作

JQTest1

健康

jenny;petertest管理删除
JQTest2

异常

jenny;petertest管理删除
JQTest3

健康

jenny;petertest管理删除
JQTest4

异常

jenny;petertest管理删除
JQTest5

健康

jenny;petertest管理删除
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/select-single.vue 1`] = `"
集群名称
状态
管理员
描述

操作

JQTest1

健康

jenny;petertest管理删除
JQTest2

异常

jenny;petertest管理删除
JQTest3

健康

jenny;petertest管理删除
JQTest4

异常

jenny;petertest管理删除
JQTest5

健康

jenny;petertest管理删除
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/select-single.vue 1`] = `"
集群名称
状态
管理员
描述

操作

JQTest1

健康

jenny;petertest管理删除
JQTest2

异常

jenny;petertest管理删除
JQTest3

健康

jenny;petertest管理删除
JQTest4

异常

jenny;petertest管理删除
JQTest5

健康

jenny;petertest管理删除
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/show-columns.vue 1`] = `"
集群名称
状态
管理员
描述
JQTest1

健康

jenny;petertest管理删除
JQTest2

异常

jennytest管理删除
JQTest3

健康

jennytest管理删除
JQTest4

异常

petertest管理删除
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/show-columns.vue 1`] = `"
集群名称
状态
管理员
描述
JQTest1

健康

jenny;petertest管理删除
JQTest2

异常

jennytest管理删除
JQTest3

健康

jennytest管理删除
JQTest4

异常

petertest管理删除
"`; exports[`ssr snapshot test > ssr test ./src/table/_example/single-sort.vue 1`] = ` "
排序:{ @@ -1052,11 +1055,11 @@ exports[`ssr snapshot test > ssr test ./src/table/_example/single-sort.vue 1`] =

警告

异常

- -->
集群名称
状态
存活时间(s)
管理员
JQTest1

健康

1000jenny;peter
JQTest2

警告

1000jenny
JQTest3

异常

500peter
JQTest4

健康

1000jenny;peter
" + -->
集群名称
状态
存活时间(s)
管理员
JQTest1

健康

1000jenny;peter
JQTest2

警告

1000jenny
JQTest3

异常

500peter
JQTest4

健康

1000jenny;peter
" `; exports[`ssr snapshot test > ssr test ./src/table/_example/tree.vue 1`] = ` -"


排序
编号
名称
平台
操作
0
我是 0_1 号
共有
1
我是 1_1 号
私有
2
我是 2_1 号
共有
3
我是 3_1 号
私有
4
我是 4_1 号
共有
66666
我是懒加载节点 66666,点我体验
共有
88888
我是懒加载节点 88888,点我体验
共有
共 5 项数据
5 条/页
  • 1
添加根节点


排序
编号
名称
平台
操作
0
我是 0_1 号
共有
1
我是 1_1 号
私有
2
我是 2_1 号
共有
3
我是 3_1 号
私有
4
我是 4_1 号
共有
66666
我是懒加载节点 66666,点我体验
共有
88888
我是懒加载节点 88888,点我体验
共有
共 5 项数据
5 条/页
  • 1
" `; -exports[`ssr snapshot test > ssr test ./src/table/_example/tree-select.vue 1`] = `"

集群名称
状态
管理员
描述
JQTest0

健康

jennyimportant.
JQTest1

异常

peterimportant.
JQTest2

健康

jennyimportant.
JQTest3

异常

peterimportant.
JQTest4

健康

jennyimportant.
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/tree-select.vue 1`] = `"

集群名称
状态
管理员
描述
JQTest0

健康

jennyimportant.
JQTest1

异常

peterimportant.
JQTest2

健康

jennyimportant.
JQTest3

异常

peterimportant.
JQTest4

健康

jennyimportant.
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/virtual-scroll.vue 1`] = `"
id
集群名称
存活时间(s)
管理员
暂无数据
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/virtual-scroll.vue 1`] = `"
id
集群名称
存活时间(s)
管理员
暂无数据
"`; exports[`ssr snapshot test > ssr test ./src/tabs/_example/ban.vue 1`] = `"
选项卡1
选项卡2
选项卡3

选项卡1的内容

"`;