Skip to content

Commit 88d6aad

Browse files
l246804l246804
committed
refactor(element-plus)!: 重命名 TableColumnsRender 为 TableSchemaColumns
1 parent 438bf37 commit 88d6aad

File tree

4 files changed

+52
-51
lines changed

4 files changed

+52
-51
lines changed

‎playground/src/pages/element-plus/table-columns-render.vue‎ renamed to ‎playground/src/pages/element-plus/table-schema-columns.vue‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import type { TableColumnProps } from '@/element-plus'
2+
import type { TableColumnSchema } from '@/element-plus'
33
import { sleep } from '@antfu/utils'
44
import { ElMessage } from 'element-plus'
55
import { reactive, ref } from 'vue'
@@ -8,7 +8,7 @@ import {
88
SectionItem,
99
SectionLayout,
1010
SectionMain,
11-
TableColumnsRender,
11+
TableSchemaColumns,
1212
Toolbar,
1313
usePagination,
1414
} from '@/element-plus'
@@ -70,7 +70,7 @@ const basicData = ref<BasicDataItem[]>([
7070
},
7171
])
7272
73-
const basicColumns: TableColumnProps<BasicDataItem>[] = [
73+
const basicColumns: TableColumnSchema<BasicDataItem>[] = [
7474
{
7575
prop: 'id',
7676
label: 'ID',
@@ -143,7 +143,7 @@ const nestedData = ref<NestedDataItem[]>([
143143
},
144144
])
145145
146-
const nestedColumns: TableColumnProps<NestedDataItem>[] = [
146+
const nestedColumns: TableColumnSchema<NestedDataItem>[] = [
147147
{
148148
prop: 'date',
149149
label: '日期',
@@ -208,7 +208,7 @@ const slotData = ref<SlotDataItem[]>([
208208
{ id: 4, product: 'AirPods Pro', price: 1899, stock: 50, category: '配件' },
209209
])
210210
211-
const slotColumns: TableColumnProps<SlotDataItem>[] = [
211+
const slotColumns: TableColumnSchema<SlotDataItem>[] = [
212212
{
213213
prop: 'id',
214214
label: 'ID',
@@ -298,7 +298,7 @@ const renderData = ref<RenderDataItem[]>([
298298
},
299299
])
300300
301-
const renderColumns: TableColumnProps<RenderDataItem>[] = [
301+
const renderColumns: TableColumnSchema<RenderDataItem>[] = [
302302
{
303303
prop: 'id',
304304
label: 'ID',
@@ -432,7 +432,7 @@ async function loadPaginationData(page: number, pageSize: number) {
432432
// 初始加载
433433
loadPaginationData(1, 10)
434434
435-
const paginationColumns: TableColumnProps<PaginationDataItem>[] = [
435+
const paginationColumns: TableColumnSchema<PaginationDataItem>[] = [
436436
{
437437
type: 'selection',
438438
width: 55,
@@ -558,7 +558,7 @@ function getStockStatus(stock: number) {
558558
fill
559559
>
560560
<ElText tag="b">
561-
TableColumnsRender 组件配置
561+
TableSchemaColumns 组件配置
562562
</ElText>
563563

564564
<ElSpace wrap>
@@ -605,7 +605,7 @@ function getStockStatus(stock: number) {
605605
fill
606606
>
607607
<ElText>
608-
<code>TableColumnsRender</code> 是对 Element Plus 的
608+
<code>TableSchemaColumns</code> 是对 Element Plus 的
609609
<code>ElTableColumn</code> 组件的封装，
610610
通过配置化的方式定义表格列，支持嵌套列、自定义插槽和渲染函数。
611611
</ElText>
@@ -616,14 +616,14 @@ function getStockStatus(stock: number) {
616616
stripe
617617
style="width: 100%"
618618
>
619-
<TableColumnsRender :columns="basicColumns">
619+
<TableSchemaColumns :columns="basicColumns">
620620
<!-- 使用模板插槽自定义状态列 -->
621621
<template #default:status="{ row }">
622622
<ElTag :type="getStatusType(row.status)">
623623
{{ getStatusText(row.status) }}
624624
</ElTag>
625625
</template>
626-
</TableColumnsRender>
626+
</TableSchemaColumns>
627627
</ElTable>
628628

629629
<ElAlert
@@ -668,7 +668,7 @@ function getStockStatus(stock: number) {
668668
border
669669
style="width: 100%"
670670
>
671-
<TableColumnsRender :columns="nestedColumns" />
671+
<TableSchemaColumns :columns="nestedColumns" />
672672
</ElTable>
673673

674674
<ElAlert
@@ -715,7 +715,7 @@ function getStockStatus(stock: number) {
715715
stripe
716716
style="width: 100%"
717717
>
718-
<TableColumnsRender :columns="slotColumns">
718+
<TableSchemaColumns :columns="slotColumns">
719719
<!-- 产品名称插槽 -->
720720
<template #default:product-cell="{ row }">
721721
<ElText
@@ -747,7 +747,7 @@ function getStockStatus(stock: number) {
747747
<span>{{ column.label }}</span>
748748
</ElSpace>
749749
</template>
750-
</TableColumnsRender>
750+
</TableSchemaColumns>
751751
</ElTable>
752752

753753
<ElAlert
@@ -803,7 +803,7 @@ function getStockStatus(stock: number) {
803803
stripe
804804
style="width: 100%"
805805
>
806-
<TableColumnsRender :columns="renderColumns">
806+
<TableSchemaColumns :columns="renderColumns">
807807
<!-- 标题列 -->
808808
<template #default:render-title="{ row }">
809809
<div style="display: flex; align-items: center; gap: 8px">
@@ -873,7 +873,7 @@ function getStockStatus(stock: number) {
873873
</ElButton>
874874
</ElSpace>
875875
</template>
876-
</TableColumnsRender>
876+
</TableSchemaColumns>
877877
</ElTable>
878878

879879
<ElAlert
@@ -948,7 +948,7 @@ function getStockStatus(stock: number) {
948948
style="width: 100%"
949949
@selection-change="handleSelectionChange"
950950
>
951-
<TableColumnsRender :columns="paginationColumns">
951+
<TableSchemaColumns :columns="paginationColumns">
952952
<!-- 角色列 -->
953953
<template #default:pagination-role="{ row }">
954954
<ElTag
@@ -1004,7 +1004,7 @@ function getStockStatus(stock: number) {
10041004
</ElButton>
10051005
</ElSpace>
10061006
</template>
1007-
</TableColumnsRender>
1007+
</TableSchemaColumns>
10081008
</ElTable>
10091009

10101010
<div
@@ -1073,18 +1073,19 @@ function getStockStatus(stock: number) {
10731073
>
10741074
<div>
10751075
<ElText tag="b">
1076-
属性 (TableColumnsRenderProps):
1076+
属性 (TableSchemaColumnsProps):
10771077
</ElText>
10781078
<ul style="margin: 8px 0; padding-left: 20px">
10791079
<li>
1080-
<code>columns</code>: TableColumnProps[]（必填）- 列定义数组
1080+
<code>columns</code>: TableColumnSchema[]（必填）-
1081+
列定义数组
10811082
</li>
10821083
</ul>
10831084
</div>
10841085

10851086
<div>
10861087
<ElText tag="b">
1087-
列配置 (TableColumnProps):
1088+
列配置 (TableColumnSchema):
10881089
</ElText>
10891090
<ul style="margin: 8px 0; padding-left: 20px">
10901091
<li><code>prop</code>: string - 对应列内容的字段名</li>
@@ -1105,7 +1106,7 @@ function getStockStatus(stock: number) {
11051106
列的类型
11061107
</li>
11071108
<li>
1108-
<code>children</code>: TableColumnProps[] -
1109+
<code>children</code>: TableColumnSchema[] -
11091110
子列定义（用于多级表头）
11101111
</li>
11111112
<li>
@@ -1126,7 +1127,7 @@ function getStockStatus(stock: number) {
11261127

11271128
<div>
11281129
<ElText tag="b">
1129-
插槽 (TableColumnsRenderSlots):
1130+
插槽 (TableSchemaColumnsSlots):
11301131
</ElText>
11311132
<ul style="margin: 8px 0; padding-left: 20px">
11321133
<li>

‎playground/types/typed-router.d.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ declare module 'vue-router/auto-routes' {
3030
Record<never, never>,
3131
| never
3232
>,
33-
'/element-plus/table-columns-render': RouteRecordInfo<
34-
'/element-plus/table-columns-render',
35-
'/element-plus/table-columns-render',
33+
'/element-plus/table-schema-columns': RouteRecordInfo<
34+
'/element-plus/table-schema-columns',
35+
'/element-plus/table-schema-columns',
3636
Record<never, never>,
3737
Record<never, never>,
3838
| never
@@ -84,9 +84,9 @@ declare module 'vue-router/auto-routes' {
8484
views:
8585
| never
8686
}
87-
'playground/src/pages/element-plus/table-columns-render.vue': {
87+
'playground/src/pages/element-plus/table-schema-columns.vue': {
8888
routes:
89-
| '/element-plus/table-columns-render'
89+
| '/element-plus/table-schema-columns'
9090
views:
9191
| never
9292
}

‎src/element-plus/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export * from './pagination-render'
2-
export * from './table-columns-render'
2+
export * from './table-schema-columns'
33

44
// Re-export
55
export * from '@/shared'

‎src/element-plus/table-columns-render/index.tsx‎ renamed to ‎src/element-plus/table-schema-columns/index.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,20 @@ export interface TableColumnSlots<T extends { [K: PropertyKey]: any } = any> {
2727
'expand'?: (data: { expanded: boolean }) => VNodeChild
2828
}
2929

30-
export type ObjectTableColumnProps<T extends { [K: PropertyKey]: any } = any> =
30+
export type ObjectTableColumnSchema<T extends { [K: PropertyKey]: any } = any> =
3131
ComponentProps<typeof ElTableColumn> & {
3232
/**
3333
* 正常情况下应该是通过 `ComponentSlots<typeof ElTableColumn>` 提取出来，
3434
* 但是 `ElTableColumn` 类型定义存在缺失，这里根据官网进行补充并优化。
3535
*
3636
* 若想在 `<template>` 中使用，则需要使用 `<template #[slotType]:[slotName]>`，
3737
* 其中 `[slotName]` 为 `slots.[slotType]` 设置的名称（仅支持字符串），
38-
* 但是模板中会丢失 `TableColumnProps<T>` 的泛型提示！
38+
* 但是模板中会丢失 `TableColumnSchema<T>` 的泛型提示！
3939
*
4040
* @example
4141
* ```ts
4242
* // script 部分
43-
* const columns: TableColumnProps[] = [
43+
* const columns: TableColumnSchema[] = [
4444
* {
4545
* prop: 'name',
4646
* label: 'Name',
@@ -59,11 +59,11 @@ export type ObjectTableColumnProps<T extends { [K: PropertyKey]: any } = any> =
5959
*
6060
* ```html
6161
* <!-- template 部分 -->
62-
* <TableColumnsRender :columns="columns">
62+
* <TableSchemaColumns :columns="columns">
6363
* <template #default:name="{ row }">
6464
* {{ row.name }}
6565
* </template>
66-
* </TableColumnsRender>
66+
* </TableSchemaColumns>
6767
* ```
6868
*/
6969
slots?: {
@@ -75,46 +75,46 @@ export type ObjectTableColumnProps<T extends { [K: PropertyKey]: any } = any> =
7575
/**
7676
* 子列定义
7777
*/
78-
children?: TableColumnProps<T>[]
78+
children?: TableColumnSchema<T>[]
7979
}
8080

81-
type FalsyTableColumnProps = false | null | undefined
81+
type FalsyTableColumnSchema = false | null | undefined
8282

83-
export type FunctionTableColumnProps = () => Exclude<
83+
export type FunctionTableColumnSchema = () => Exclude<
8484
VNodeChild,
8585
VNodeArrayChildren
8686
>
8787

88-
export type TableColumnProps<T extends { [K: PropertyKey]: any } = any> =
89-
| FalsyTableColumnProps |
90-
ObjectTableColumnProps<T> |
91-
FunctionTableColumnProps
88+
export type TableColumnSchema<T extends { [K: PropertyKey]: any } = any> =
89+
| FalsyTableColumnSchema |
90+
ObjectTableColumnSchema<T> |
91+
FunctionTableColumnSchema
9292

93-
export interface TableColumnsRenderProps {
93+
export interface TableSchemaColumnsProps {
9494
/**
9595
* 列定义，同 `ElTableColumn` 的属性，额外支持 `children` 用于定义子列，
9696
* 列的 `slots` 同 `ElTableColumn` 的 `slots`
9797
*/
98-
columns: TableColumnProps<any>[]
98+
columns: TableColumnSchema<any>[]
9999
}
100100

101101
/**
102102
* 由于 `ElTableColumn` 没有 `emit` 事件，这里只是为了类型占位
103103
*/
104-
interface TableColumnsRenderEmits extends ObjectEmitsOptions {}
104+
interface TableSchemaColumnsEmits extends ObjectEmitsOptions {}
105105

106-
export type TableColumnsRenderSlots = {
106+
export type TableSchemaColumnsSlots = {
107107
[K in keyof TableColumnSlots<any> as `${K}:${string}`]: NonNullable<
108108
TableColumnSlots<any>[K]
109109
>
110110
} & {
111111
[K: string]: (data: any) => VNodeChild
112112
}
113113

114-
export const TableColumnsRender: FunctionalComponent<
115-
TableColumnsRenderProps,
116-
TableColumnsRenderEmits,
117-
TableColumnsRenderSlots
114+
export const TableSchemaColumns: FunctionalComponent<
115+
TableSchemaColumnsProps,
116+
TableSchemaColumnsEmits,
117+
TableSchemaColumnsSlots
118118
> = ({ columns }, { slots }) => {
119119
const vNodes: VNodeChild = []
120120

@@ -142,7 +142,7 @@ export const TableColumnsRender: FunctionalComponent<
142142
...finalSlots,
143143
default:
144144
children && !finalSlots.default
145-
? () => <TableColumnsRender columns={children} />
145+
? () => <TableSchemaColumns columns={children} />
146146
: finalSlots.default,
147147
}}
148148
</ElTableColumn>,
@@ -152,7 +152,7 @@ export const TableColumnsRender: FunctionalComponent<
152152
return vNodes
153153
}
154154

155-
TableColumnsRender.props = {
155+
TableSchemaColumns.props = {
156156
columns: {
157157
type: Array,
158158
required: true,

0 commit comments

Comments
 (0)