github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

doc: update doc

refactor-table
tangjinzhou 2021-09-11 23:33:44 +08:00
parent 56ed9854df
commit 1a77a98546
10 changed files with 135 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/table/Table.tsx
View File

@ -105,6 +105,7 @@ export interface TableProps<RecordType = DefaultRecordType>
sortDirections?: SortOrder[];
showSorterTooltip?: boolean | TooltipProps;
}
export const tableProps = () => {
return {
prefixCls: { type: String as PropType<string>, default: undefined },
@ -211,6 +212,9 @@ export const tableProps = () => {
contextSlots: {
type: Object as PropType<ContextSlots>,
},
transformCellText: {
type: Function as PropType<TableProps['transformCellText']>,
},
};
};
@ -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: () =>

114
components/table/index.en-US.md
View File

@ -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' <br /> filterReset: 'Reset' <br /> 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.<br />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.<br />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 <Table rowKey="uid" />;
// or
return <Table rowKey={record => 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 `.`.

16
components/table/index.zh-CN.md
View File

@ -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 | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 3.0 |
| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `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

3
components/vc-table/Body/BodyRow.tsx
View File

@ -107,7 +107,7 @@ export default defineComponent<BodyRowProps<unknown>>({
rowComponent: RowComponent,
cellComponent,
} = props;
const { prefixCls, fixedInfoList } = tableContext;
const { prefixCls, fixedInfoList, transformCellText } = tableContext;
const {
fixHeader,
fixColumn,
@ -164,6 +164,7 @@ export default defineComponent<BodyRowProps<unknown>>({
{...fixedInfo}
additionalProps={additionalCellProps}
column={column}
transformCellText={transformCellText}
v-slots={{
// ============= Used for nest expandable =============
appendNode: () => {

15
components/vc-table/Cell/index.tsx
View File

@ -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<RecordType = DefaultRecordType> {
column?: ColumnType<RecordType>;
cellType?: 'header' | 'body';
transformCellText?: TransformCellText<RecordType>;
}
export default defineComponent<CellProps>({
name: 'Cell',
@ -83,6 +86,7 @@ export default defineComponent<CellProps>({
'isSticky',
'column',
'cellType',
'transformCellText',
] as any,
slots: ['appendNode'],
setup(props, { slots }) {
@ -158,6 +162,15 @@ export default defineComponent<CellProps>({
}) 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

6
components/vc-table/Table.tsx
View File

@ -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<RecordType = unknown> {
canExpandable?: boolean;
onUpdateInternalRefs?: (refs: Record<string, any>) => void;
transformCellText?: TransformCellText<RecordType>;
}
export default defineComponent<TableProps>({
@ -180,6 +183,7 @@ export default defineComponent<TableProps>({
'internalRefs',
'canExpandable',
'onUpdateInternalRefs',
'transformCellText',
] as any,
slots: ['title', 'footer', 'summary', 'emptyText'],
emits: ['expand', 'expandedRowsChange', 'updateInternalRefs'],
@ -505,7 +509,7 @@ export default defineComponent<TableProps>({
};
useProvideTable(
reactive({
...reactivePick(props, 'prefixCls', 'direction'),
...reactivePick(props, 'prefixCls', 'direction', 'transformCellText'),
getComponent,
scrollbarSize,
fixedInfoList: computed(() =>

4
components/vc-table/context/TableContext.tsx
View File

@ -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<unknown>;
}
export const TableContextKey: InjectionKey<TableContextProps> = Symbol('TableContextProps');

7
components/vc-table/interface.ts
View File

@ -32,6 +32,13 @@ export type RowClassName<RecordType> = (
indent: number,
) => string;
export type TransformCellText<RecordType> = (opt: {
text: any;
column: ColumnType<RecordType>;
record: any;
index: number;
}) => any;
// =================== Column ===================
export interface CellType<RecordType = DefaultRecordType> {
key?: Key;

4
plugin/md/markdown/plugins/slugify.ts
View File

@ -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()
);
};

4
site/src/layouts/Demo.vue
View File

@ -34,12 +34,12 @@ export default defineComponent({
return props?.pageData?.html || '';
});
const description = computed(() => {
return docHtml.value.split('<h2 id="api">API</h2>')[0];
return docHtml.value.split('<h2 id="API">API</h2>')[0];
});
const api = computed(() => {
return `
<h2 id="API"><span>API</span><a href="#API" class="anchor">#</a></h2>
${docHtml.value.split('<h2 id="api">API</h2>')[1]}
${docHtml.value.split('<h2 id="API">API</h2>')[1]}
`;
});
return { frontmatter, description, api, route, showAd };