diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 35261e7e1..e5c5014e6 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -105,6 +105,7 @@ export interface TableProps sortDirections?: SortOrder[]; showSorterTooltip?: boolean | TooltipProps; } + export const tableProps = () => { return { prefixCls: { type: String as PropType, default: undefined }, @@ -211,6 +212,9 @@ export const tableProps = () => { contextSlots: { type: Object as PropType, }, + transformCellText: { + type: Function as PropType, + }, }; }; @@ -264,6 +268,9 @@ const InteralTable = defineComponent< prefixCls, configProvider, } = useConfigInject('table', props); + const transformCellText = computed( + () => props.transformCellText || configProvider.transformCellText, + ); const [tableLocale] = useLocaleReceiver('Table', defaultLocale.Table, toRef(props, 'locale')); const rawData = computed(() => props.dataSource || EMPTY_LIST); @@ -618,6 +625,7 @@ const InteralTable = defineComponent< internalRefs={internalRefs} onUpdateInternalRefs={updateInternalRefs} transformColumns={transformColumns} + transformCellText={transformCellText.value} v-slots={{ ...slots, emptyText: () => diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 5a7962552..d094b116a 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -79,10 +79,11 @@ Specify `dataSource` of Table as an array of data. | defaultExpandedRowKeys | Initial expanded row keys | string\[] | - | | | expandedRowKeys | Current expanded row keys | string\[] | - | | | expandedRowRender | Expanded container render for each row | Function({record, index, indent, expanded}):VNode\|v-slot | - | | -| expandIcon | Customize row expand Icon. | Function(props):VNode \| #expandIcon="props" | - | | +| expandFixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false | 3.0 | +| expandIcon | Customize row expand Icon. | Function(props):VNode \| v-slot:expandIcon="props" | - | | | expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | `false` | | -| expandIconColumnIndex | The index of `expandIcon` which column will be inserted when `expandIconAsCell` is false | 0 | | -| footer | Table footer renderer | Function(currentPageData)\| v-slot | | +| expandIconColumnIndex | Customize expand icon column index. Not render when `-1` | 0 | | +| footer | Table footer renderer | Function(currentPageData)\| v-slot:footer="currentPageData" | | | indentSize | Indent size in pixels of tree data | number | 15 | | | loading | Loading status of table | boolean\|[object](/components/spin) | `false` | | locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok'
filterReset: 'Reset'
emptyText: 'No Data' | | @@ -90,14 +91,26 @@ Specify `dataSource` of Table as an array of data. | rowClassName | Row's className | Function(record, index):string | - | | | rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record, index):string | `key` | | | rowSelection | Row selection [config](#rowSelection) | object | null | | -| scroll | Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area. It is recommended to set a number for `x`, if you want to set it to `true`, you need to add style `.ant-table td { white-space: nowrap; }`. | { x: number \| true, y: number } | - | | +| scroll | Whether the table can be scrollable, [config](#scroll) | object | - | | | showHeader | Whether to show table header | boolean | `true` | | +| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | 3.0 | +| showSorterTooltip | The header show next sorter direction tooltip. It will be set as the property of Tooltip if its type is object | boolean \| [Tooltip props](/components/tooltip/#API) | true | 3.0 | | size | Size of table | `default` \| `middle` \| `small` \| `large` | `default` | -| title | Table title renderer | Function(currentPageData)\| v-slot | | | +| sticky | Set sticky header and scroll bar | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 3.0 | +| title | Table title renderer | Function(currentPageData)\| v-slot:title="currentPageData" | | | | customHeaderRow | Set props on per header row | Function(column, index) | - | | | customRow | Set props on per row | Function(record, index) | - | | | getPopupContainer | the render container of dropdowns in table | (triggerNode) => HTMLElement | `() => TableHtmlElement` | 1.5.0 | -| transformCellText | Data can be changed again before rendering. The default configuration of general user empty data. You can configured globally through [ConfigProvider](/components/config-provider-cn/) | Function({ text, column, record, index }) => any | - | 1.5.4 ｜ | +| headerCell | custom head cell by slot | v-slot:headerCell="{title, column}" | - | 3.0 | +| bodyCell | custom body cell by slot | v-slot:bodyCell="{text, record, index, column}" | - | 3.0 | +| customFilterDropdown | Customized filter overlay，need set `column.customFilterDropdown` | v-slot:customFilterDropdown="[FilterDropdownProps](#FilterDropdownProps)" | - | 3.0 | +| customFilterIcon | Customized filter icon | v-slot:customFilterIcon="{filtered, column}" | - | 3.0 | +| emptyText | Customize the display content when empty data | v-slot:emptyText | - | 3.0 | +| transformCellText | The data can be changed again before rendering, generally used for the default configuration of empty data. You can configured globally through [ConfigProvider](/components/config-provider-cn/) | Function({ text, column, record, index }) => any, The `text` here is the data processed by other defined cell api, and it may be of type VNode \| string \| number | - | 1.5.4 ｜ | + +- `expandFixed` + - When set to true or `left` and `expandIconColumnIndex` is not set or is 0, enable fixed + - When set to true or `right` and `expandIconColumnIndex` is set to the number of table columns, enable fixed ### Events @@ -140,29 +153,37 @@ One of the Table `columns` prop for describing the table's columns, Column has t | align | specify how content is aligned | 'left' \| 'right' \| 'center' | 'left' | | | ellipsis | ellipsize cell content, not working with sorter and filters for now.
tableLayout would be `fixed` when `ellipsis` is true. | boolean | false | 1.5.0 | | colSpan | Span of this column's title | number | | | -| dataIndex | Display field of the data record, could be set like `a.b.c` | string | - | | +| dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - | | | defaultFilteredValue | Default filtered values | string\[] | - | 1.5.0 | | defaultSortOrder | Default order of sorted values: `'ascend'` `'descend'` `null` | string | - | | -| filterDropdown | Customized filter overlay | slot | - | | +| ellipsis | The ellipsis cell content, not working with sorter and filters for now.
tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | 3.0 | +| filterDropdown | Customized filter overlay | VNode | - | | +| customFilterDropdown | use v-slot:customFilterDropdown，Priority is lower than filterDropdown | boolean | false | 3.0 | | filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | | | filtered | Whether the `dataSource` is filtered | boolean | `false` | | | filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | | -| filterIcon | Customized filter icon | slot \| ({filtered: boolean, column: Column}) | `false` | | +| filterIcon | Customized filter icon | ({filtered: boolean, column: Column}) | `false` | | | filterMultiple | Whether multiple filters can be selected | boolean | `true` | | | filters | Filter menu config | object\[] | - | | | fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` | | | key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | | -| customRender | Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config | Function({text, record, index}) {}\|v-slot | - | | +| customRender | Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config | Function({text, record, index}) {} | - | | +| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](#Breakpoint)\[] | - | 3.0 | | sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - | | | sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - | | | sortDirections | supported sort way, could be `'ascend'`, `'descend'` | Array | `['ascend', 'descend']` | 1.5.0 | -| title | Title of this column | string\|slot | - | | +| title | Title of this column | string | - | | | width | Width of this column | string\|number | - | | | customCell | Set props on per cell | Function(record, rowIndex) | - | | | customHeaderCell | Set props on per header cell | Function(column) | - | | | onFilter | Callback executed when the confirm filter button is clicked, Use as a `filter` event when using template or jsx | Function | - | | | onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed, Use as a `filterDropdownVisible` event when using template or jsx | function(visible) {} | - | | -| slots | When using columns, you can use this property to configure the properties that support the slot, such as `slots: { filterIcon: 'XXX'}` | object | - | | + +#### Breakpoint + +```ts +type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'; +``` ### ColumnGroup @@ -175,9 +196,9 @@ One of the Table `columns` prop for describing the table's columns, Column has t Properties for pagination. -| Property | Description | Type | Default | -| -------- | ------------------------------------ | --------------------------- | -------- | -| position | specify the position of `Pagination` | 'top' \| 'bottom' \| 'both' | 'bottom' | +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| position | Specify the position of `Pagination`, could be`topLeft` \| `topCenter` \| `topRight` \|`bottomLeft` \| `bottomCenter` \| `bottomRight` | Array | \[`bottomRight`] | More about pagination, please check [`Pagination`](/components/pagination/). @@ -185,28 +206,32 @@ More about pagination, please check [`Pagination`](/components/pagination/). Properties for row selection. -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| columnWidth | Set the width of the selection column | string\|number | - | -| columnTitle | Set the title of the selection column | string\|VNode | - | -| fixed | Fixed selection column on the left | boolean | - | -| getCheckboxProps | Get Checkbox or Radio props | Function(record) | - | -| hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections | boolean | `false` | -| selectedRowKeys | Controlled selected row keys | string\[] | \[] | -| selections | Custom selection config, only displays default selections when set to `true` | object\[]\|boolean | - | -| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` | -| onChange | Callback executed when selected rows change | Function(selectedRowKeys, selectedRows) | - | -| onSelect | Callback executed when select/deselect one row | Function(record, selected, selectedRows, nativeEvent) | - | -| onSelectAll | Callback executed when select/deselect all rows | Function(selected, selectedRows, changeRows) | - | -| onSelectInvert | Callback executed when row selection is inverted | Function(selectedRows) | - | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | 3.0 | +| columnWidth | Set the width of the selection column | string\|number | - | | +| columnTitle | Set the title of the selection column | string\|VNode | - | | +| fixed | Fixed selection column on the left | boolean | - | | +| getCheckboxProps | Get Checkbox or Radio props | Function(record) | - | | +| hideSelectAll | Hide the selectAll checkbox and custom selection | boolean | false | 3.0 | +| preserveSelectedRowKeys | Keep selection `key` even when it removed from `dataSource` | boolean | - | 3.0 | +| hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections | boolean | `false` | | +| selectedRowKeys | Controlled selected row keys | string\[] | \[] | | +| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[] \| boolean | - | | +| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` | | +| onChange | Callback executed when selected rows change | Function(selectedRowKeys, selectedRows) | - | | +| onSelect | Callback executed when select/deselect one row | Function(record, selected, selectedRows, nativeEvent) | - | | +| onSelectAll | Callback executed when select/deselect all rows | Function(selected, selectedRows, changeRows) | - | | +| onSelectInvert | Callback executed when row selection is inverted | Function(selectedRows) | - | | +| onSelectNone | Callback executed when row selection is cleared | function() | - | 3.0 | ### scroll -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| x | Set horizontal scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, true and ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \| true | - | | -| y | Set vertical scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, true and ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \| true | - | | -| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - | 1.5.0 | +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - | +| x | Set horizontal scrolling, can also be used to specify the width of the scroll area, could be number, percent value, true and ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | string \| number \| true | - | +| y | Set vertical scrolling, can also be used to specify the height of the scroll area, could be string or number | string \| number | - | ### selection @@ -218,6 +243,21 @@ Custom selection config | text | Display text of this selection | string\|VNode | - | | onSelect | Callback executed when this selection is clicked | Function(changeableRowKeys) | - | +### FilterDropdownProps + +```ts +interface FilterDropdownProps { + prefixCls: string; + setSelectedKeys: (selectedKeys: Key[]) => void; + selectedKeys: Key[]; + confirm: (param?: FilterConfirmProps) => void; + clearFilters?: () => void; + filters?: ColumnFilterItem[]; + visible: boolean; + column: ColumnType; +} +``` + ## Note The values inside `dataSource` and `columns` should follow this in Table, and `dataSource[i].key` would be treated as key value default for `dataSource`. @@ -230,3 +270,9 @@ return ; // or return
record.uid} />; ``` + +## Migrate to v3 + +Table deprecated `column.slots`, added `v-slot:bodyCell`, `v-slot:headerCell`, custom cells, and added `column.customFilterDropdown` `v-slot:customFilterDropdown`, custom filtering Menu, added `v-slot:customFilterIcon` custom filter button, but `column.slots` is still available, we will remove it in the next major version. + +Besides, the breaking change is changing `dataIndex` from nest string path like `user.age` to string array path like `['user', 'age']`. This help to resolve developer should additional work on the field which contains `.`. diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index a0288baf8..c4762fad9 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -111,7 +111,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg | bodyCell | 个性化单元格 | v-slot:bodyCell="{text, record, index, column}" | - | 3.0 | | customFilterDropdown | 自定义筛选菜单，需要配合 `column.customFilterDropdown` 使用 | v-slot:customFilterDropdown="[FilterDropdownProps](#FilterDropdownProps)" | - | 3.0 | | customFilterIcon | 自定义筛选图标 | v-slot:customFilterIcon="{filtered, column}" | - | 3.0 | -| transformCellText | 数据渲染前可以再次改变，一般用户空数据的默认配置，可以通过 [ConfigProvider](/components/config-provider-cn/) 全局统一配置 | Function({ text, column, record, index }) => any | - | 1.5.4 | +| emptyText | 自定义空数据时的显示内容 | v-slot:emptyText | - | 3.0 | +| transformCellText | 数据渲染前可以再次改变，一般用于空数据的默认配置，可以通过 [ConfigProvider](/components/config-provider-cn/) 全局统一配置 | Function({ text, column, record, index }) => any，此处的 text 是经过其它定义单元格 api 处理后的数据，有可能是 VNode \| string \| number 类型 | - | 1.5.4 | - `expandFixed` - 当设置为 true 或 `left` 且 `expandIconColumnIndex` 未设置或为 0 时，开启固定 @@ -160,7 +161,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg | dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string\[] | - | | | defaultFilteredValue | 默认筛选值 | string\[] | - | 1.5.0 | | defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - | | -| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。
设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 3.0 | +| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。
设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | 3.0 | | filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | VNode | - | | | customFilterDropdown | 启用 v-slot:customFilterDropdown，优先级低于 filterDropdown | boolean | false | 3.0 | | filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - | | @@ -172,7 +173,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg | fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false | | | key | Vue 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - | | | customRender | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格行/列合并,可参考 demo 表格行/列合并 | Function({text, record, index, column}) {} | - | | -| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 | +| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | [Breakpoint](#Breakpoint)\[] | - | 3.0 | | showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 `showSorterTooltip` | boolean \| [Tooltip props](/components/tooltip/#API) | true | | | sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | Function\|boolean | - | | | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` `false` | boolean\|string | - | | @@ -184,6 +185,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg | onFilter | 本地模式下，确定筛选的运行函数, 使用 template 或 jsx 时作为`filter`事件使用 | Function | - | | | onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用，使用 template 或 jsx 时作为`filterDropdownVisibleChange`事件使用 | function(visible) {} | - | | +#### Breakpoint + +```ts +type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'; +``` + ### ColumnGroup | 参数 | 说明 | 类型 | 默认值 | @@ -206,7 +213,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| checkStrictly | checkable 状态下节点选择完全受控（父子数据选中状态不再关联） | boolean | true | 4.4.0 | +| checkStrictly | checkable 状态下节点选择完全受控（父子数据选中状态不再关联） | boolean | true | 3.0 | | columnWidth | 自定义列表选择框宽度 | string\|number | - | | | columnTitle | 自定义列表选择框标题 | string\|VNode | - | | | fixed | 把选择框列固定在左边 | boolean | - | | @@ -221,6 +228,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg | onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows, nativeEvent) | - | | onSelectAll | 用户手动选择/取消选择所有列的回调 | Function(selected, selectedRows, changeRows) | - | | onSelectInvert | 用户手动选择反选的回调 | Function(selectedRows) | - | +| onSelectNone | 用户清空选择的回调 | function() | - | 3.0 | ### scroll diff --git a/components/vc-table/Body/BodyRow.tsx b/components/vc-table/Body/BodyRow.tsx index 0159d46e2..f5b7f86e9 100644 --- a/components/vc-table/Body/BodyRow.tsx +++ b/components/vc-table/Body/BodyRow.tsx @@ -107,7 +107,7 @@ export default defineComponent>({ rowComponent: RowComponent, cellComponent, } = props; - const { prefixCls, fixedInfoList } = tableContext; + const { prefixCls, fixedInfoList, transformCellText } = tableContext; const { fixHeader, fixColumn, @@ -164,6 +164,7 @@ export default defineComponent>({ {...fixedInfo} additionalProps={additionalCellProps} column={column} + transformCellText={transformCellText} v-slots={{ // ============= Used for nest expandable ============= appendNode: () => { diff --git a/components/vc-table/Cell/index.tsx b/components/vc-table/Cell/index.tsx index 49b81e737..db20b7cba 100644 --- a/components/vc-table/Cell/index.tsx +++ b/components/vc-table/Cell/index.tsx @@ -1,6 +1,6 @@ import classNames from '../../_util/classNames'; import { flattenChildren, isValidElement, parseStyleText } from '../../_util/props-util'; -import type { CSSProperties, HTMLAttributes } from 'vue'; +import { CSSProperties, HTMLAttributes } from 'vue'; import { defineComponent, isVNode } from 'vue'; import type { @@ -12,6 +12,7 @@ import type { DefaultRecordType, AlignType, CellEllipsisType, + TransformCellText, } from '../interface'; import { getPathValue, validateValue } from '../utils/valueUtil'; import { useInjectSlots } from '../../table/context'; @@ -57,6 +58,8 @@ export interface CellProps { column?: ColumnType; cellType?: 'header' | 'body'; + + transformCellText?: TransformCellText; } export default defineComponent({ name: 'Cell', @@ -83,6 +86,7 @@ export default defineComponent({ 'isSticky', 'column', 'cellType', + 'transformCellText', ] as any, slots: ['appendNode'], setup(props, { slots }) { @@ -158,6 +162,15 @@ export default defineComponent({ }) as any, ); } + /** maybe we should @deprecated */ + if (props.transformCellText) { + childNode = props.transformCellText({ + text: childNode, + record, + index, + column: column.__originColumn__, + }); + } } // Not crash if final `childNode` is not validate ReactNode diff --git a/components/vc-table/Table.tsx b/components/vc-table/Table.tsx index a0caf98e3..e43a35cbb 100644 --- a/components/vc-table/Table.tsx +++ b/components/vc-table/Table.tsx @@ -15,6 +15,7 @@ import type { TableSticky, ExpandedRowRender, RenderExpandIcon, + TransformCellText, } from './interface'; import Body from './Body'; import useColumns from './hooks/useColumns'; @@ -138,6 +139,8 @@ export interface TableProps { canExpandable?: boolean; onUpdateInternalRefs?: (refs: Record) => void; + + transformCellText?: TransformCellText; } export default defineComponent({ @@ -180,6 +183,7 @@ export default defineComponent({ 'internalRefs', 'canExpandable', 'onUpdateInternalRefs', + 'transformCellText', ] as any, slots: ['title', 'footer', 'summary', 'emptyText'], emits: ['expand', 'expandedRowsChange', 'updateInternalRefs'], @@ -505,7 +509,7 @@ export default defineComponent({ }; useProvideTable( reactive({ - ...reactivePick(props, 'prefixCls', 'direction'), + ...reactivePick(props, 'prefixCls', 'direction', 'transformCellText'), getComponent, scrollbarSize, fixedInfoList: computed(() => diff --git a/components/vc-table/context/TableContext.tsx b/components/vc-table/context/TableContext.tsx index 01ebd8b74..08a835b38 100644 --- a/components/vc-table/context/TableContext.tsx +++ b/components/vc-table/context/TableContext.tsx @@ -1,6 +1,6 @@ import type { InjectionKey } from 'vue'; import { inject, provide } from 'vue'; -import type { GetComponent } from '../interface'; +import type { GetComponent, TransformCellText } from '../interface'; import type { FixedInfo } from '../utils/fixUtil'; export interface TableContextProps { @@ -18,6 +18,8 @@ export interface TableContextProps { isSticky: boolean; summaryCollect: (uniKey: string, fixed: boolean | string) => void; + + transformCellText: TransformCellText; } export const TableContextKey: InjectionKey = Symbol('TableContextProps'); diff --git a/components/vc-table/interface.ts b/components/vc-table/interface.ts index 95386fd55..642c95006 100644 --- a/components/vc-table/interface.ts +++ b/components/vc-table/interface.ts @@ -32,6 +32,13 @@ export type RowClassName = ( indent: number, ) => string; +export type TransformCellText = (opt: { + text: any; + column: ColumnType; + record: any; + index: number; +}) => any; + // =================== Column =================== export interface CellType { key?: Key; diff --git a/plugin/md/markdown/plugins/slugify.ts b/plugin/md/markdown/plugins/slugify.ts index 63888cb70..52bcd1266 100644 --- a/plugin/md/markdown/plugins/slugify.ts +++ b/plugin/md/markdown/plugins/slugify.ts @@ -19,7 +19,7 @@ export const slugify = (str: string): string => { .replace(/^\-+|\-+$/g, '') // ensure it doesn't start with a number (#121) .replace(/^(\d)/, '_$1') - // lowercase - .toLowerCase() + // lowercase + // .toLowerCase() ); }; diff --git a/site/src/layouts/Demo.vue b/site/src/layouts/Demo.vue index f9ecb6f12..0590d02e5 100644 --- a/site/src/layouts/Demo.vue +++ b/site/src/layouts/Demo.vue @@ -34,12 +34,12 @@ export default defineComponent({ return props?.pageData?.html || ''; }); const description = computed(() => { - return docHtml.value.split('

API

')[0]; + return docHtml.value.split('

API

')[0]; }); const api = computed(() => { return `

API#

- ${docHtml.value.split('

API

')[1]} + ${docHtml.value.split('

API

')[1]} `; }); return { frontmatter, description, api, route, showAd };