Skip to content

Commit 692ca8c

Browse files
committed
refactor(element-plus)!: 重命名 ColumnsRenderTableColumnsRender
1 parent a6e6d43 commit 692ca8c

File tree

4 files changed

+71
-58
lines changed

4 files changed

+71
-58
lines changed

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

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script setup lang="ts">
2-
import type { ColumnProps } from '@/element-plus'
2+
import type { TableColumnProps } from '@/element-plus'
33
import { sleep } from '@antfu/utils'
44
import { ElMessage } from 'element-plus'
55
import { reactive, ref } from 'vue'
66
import {
7-
ColumnsRender,
87
PaginationRender,
98
SectionItem,
109
SectionLayout,
1110
SectionMain,
11+
TableColumnsRender,
1212
Toolbar,
1313
usePagination,
1414
} from '@/element-plus'
@@ -70,7 +70,7 @@ const basicData = ref<BasicDataItem[]>([
7070
},
7171
])
7272
73-
const basicColumns: ColumnProps<BasicDataItem>[] = [
73+
const basicColumns: TableColumnProps<BasicDataItem>[] = [
7474
{
7575
prop: 'id',
7676
label: 'ID',
@@ -143,7 +143,7 @@ const nestedData = ref<NestedDataItem[]>([
143143
},
144144
])
145145
146-
const nestedColumns: ColumnProps<NestedDataItem>[] = [
146+
const nestedColumns: TableColumnProps<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: ColumnProps<SlotDataItem>[] = [
211+
const slotColumns: TableColumnProps<SlotDataItem>[] = [
212212
{
213213
prop: 'id',
214214
label: 'ID',
@@ -298,7 +298,7 @@ const renderData = ref<RenderDataItem[]>([
298298
},
299299
])
300300
301-
const renderColumns: ColumnProps<RenderDataItem>[] = [
301+
const renderColumns: TableColumnProps<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: ColumnProps<PaginationDataItem>[] = [
435+
const paginationColumns: TableColumnProps<PaginationDataItem>[] = [
436436
{
437437
type: 'selection',
438438
width: 55,
@@ -558,7 +558,7 @@ function getStockStatus(stock: number) {
558558
fill
559559
>
560560
<ElText tag="b">
561-
ColumnsRender 组件配置
561+
TableColumnsRender 组件配置
562562
</ElText>
563563

564564
<ElSpace wrap>
@@ -605,7 +605,7 @@ function getStockStatus(stock: number) {
605605
fill
606606
>
607607
<ElText>
608-
<code>ColumnsRender</code> 是对 Element Plus 的
608+
<code>TableColumnsRender</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-
<ColumnsRender :columns="basicColumns">
619+
<TableColumnsRender :columns="basicColumns">
620620
<!-- 使用模板插槽自定义状态列 -->
621621
<template #default:status="{ row }">
622622
<ElTag :type="getStatusType(row.status)">
623623
{{ getStatusText(row.status) }}
624624
</ElTag>
625625
</template>
626-
</ColumnsRender>
626+
</TableColumnsRender>
627627
</ElTable>
628628

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

674674
<ElAlert
@@ -715,7 +715,7 @@ function getStockStatus(stock: number) {
715715
stripe
716716
style="width: 100%"
717717
>
718-
<ColumnsRender :columns="slotColumns">
718+
<TableColumnsRender :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-
</ColumnsRender>
750+
</TableColumnsRender>
751751
</ElTable>
752752

753753
<ElAlert
@@ -803,7 +803,7 @@ function getStockStatus(stock: number) {
803803
stripe
804804
style="width: 100%"
805805
>
806-
<ColumnsRender :columns="renderColumns">
806+
<TableColumnsRender :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-
</ColumnsRender>
876+
</TableColumnsRender>
877877
</ElTable>
878878

879879
<ElAlert
@@ -948,7 +948,7 @@ function getStockStatus(stock: number) {
948948
style="width: 100%"
949949
@selection-change="handleSelectionChange"
950950
>
951-
<ColumnsRender :columns="paginationColumns">
951+
<TableColumnsRender :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-
</ColumnsRender>
1007+
</TableColumnsRender>
10081008
</ElTable>
10091009

10101010
<div
@@ -1073,18 +1073,18 @@ function getStockStatus(stock: number) {
10731073
>
10741074
<div>
10751075
<ElText tag="b">
1076-
属性 (ColumnsRenderProps):
1076+
属性 (TableColumnsRenderProps):
10771077
</ElText>
10781078
<ul style="margin: 8px 0; padding-left: 20px">
10791079
<li>
1080-
<code>columns</code>: ColumnProps[](必填)- 列定义数组
1080+
<code>columns</code>: TableColumnProps[](必填)- 列定义数组
10811081
</li>
10821082
</ul>
10831083
</div>
10841084

10851085
<div>
10861086
<ElText tag="b">
1087-
列配置 (ColumnProps):
1087+
列配置 (TableColumnProps):
10881088
</ElText>
10891089
<ul style="margin: 8px 0; padding-left: 20px">
10901090
<li><code>prop</code>: string - 对应列内容的字段名</li>
@@ -1105,7 +1105,7 @@ function getStockStatus(stock: number) {
11051105
列的类型
11061106
</li>
11071107
<li>
1108-
<code>children</code>: ColumnProps[] -
1108+
<code>children</code>: TableColumnProps[] -
11091109
子列定义(用于多级表头)
11101110
</li>
11111111
<li>
@@ -1126,7 +1126,7 @@ function getStockStatus(stock: number) {
11261126

11271127
<div>
11281128
<ElText tag="b">
1129-
插槽 (ColumnsRenderSlots):
1129+
插槽 (TableColumnsRenderSlots):
11301130
</ElText>
11311131
<ul style="margin: 8px 0; padding-left: 20px">
11321132
<li>

playground/types/typed-router.d.ts

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@ declare module 'vue-router/auto-routes' {
2323
* Route name map generated by unplugin-vue-router
2424
*/
2525
export interface RouteNamedMap {
26-
'/element-plus/columns-render': RouteRecordInfo<
27-
'/element-plus/columns-render',
28-
'/element-plus/columns-render',
26+
'/element-plus/pagination-render': RouteRecordInfo<
27+
'/element-plus/pagination-render',
28+
'/element-plus/pagination-render',
2929
Record<never, never>,
3030
Record<never, never>,
3131
| never
3232
>,
33-
'/element-plus/pagination-render': RouteRecordInfo<
34-
'/element-plus/pagination-render',
35-
'/element-plus/pagination-render',
33+
'/element-plus/table-columns-render': RouteRecordInfo<
34+
'/element-plus/table-columns-render',
35+
'/element-plus/table-columns-render',
3636
Record<never, never>,
3737
Record<never, never>,
3838
| never
@@ -58,6 +58,13 @@ declare module 'vue-router/auto-routes' {
5858
Record<never, never>,
5959
| never
6060
>,
61+
'/shared/use-selection': RouteRecordInfo<
62+
'/shared/use-selection',
63+
'/shared/use-selection',
64+
Record<never, never>,
65+
Record<never, never>,
66+
| never
67+
>,
6168
}
6269

6370
/**
@@ -71,15 +78,15 @@ declare module 'vue-router/auto-routes' {
7178
* @internal
7279
*/
7380
export interface _RouteFileInfoMap {
74-
'playground/src/pages/element-plus/columns-render.vue': {
81+
'playground/src/pages/element-plus/pagination-render.vue': {
7582
routes:
76-
| '/element-plus/columns-render'
83+
| '/element-plus/pagination-render'
7784
views:
7885
| never
7986
}
80-
'playground/src/pages/element-plus/pagination-render.vue': {
87+
'playground/src/pages/element-plus/table-columns-render.vue': {
8188
routes:
82-
| '/element-plus/pagination-render'
89+
| '/element-plus/table-columns-render'
8390
views:
8491
| never
8592
}
@@ -101,6 +108,12 @@ declare module 'vue-router/auto-routes' {
101108
views:
102109
| never
103110
}
111+
'playground/src/pages/shared/use-selection.vue': {
112+
routes:
113+
| '/shared/use-selection'
114+
views:
115+
| never
116+
}
104117
}
105118

106119
/**

src/element-plus/index.ts

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

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

0 commit comments

Comments
 (0)