Skip to content

Commit 6e3e52b

Browse files
tangjinzhoutangjinzhou
committed
refactor: table
1 parent fdf772a commit 6e3e52b

File tree

14 files changed

+84
-85
lines changed

14 files changed

+84
-85
lines changed

‎components/table/Table.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,10 @@ export const tableProps = () => {
114114
columns: { type: Array as PropType<ColumnsType>, default: undefined },
115115
rowKey: { type: [String, Function] as PropType<TableProps['rowKey']>, default: undefined },
116116
tableLayout: { type: String as PropType<TableProps['tableLayout']>, default: undefined },
117-
rowClassName: { type: String as PropType<TableProps['rowClassName']>, default: undefined },
117+
rowClassName: {
118+
type: [String, Function] as PropType<TableProps['rowClassName']>,
119+
default: undefined,
120+
},
118121
title: { type: Function as PropType<TableProps['title']>, default: undefined },
119122
footer: { type: Function as PropType<TableProps['footer']>, default: undefined },
120123
id: { type: String as PropType<TableProps['id']>, default: undefined },

‎components/table/demo/expand.vue

+6-3
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,11 @@ When there's too much information to show and the table can't display all at onc
1818

1919
<template>
2020
<a-table :columns="columns" :data-source="data">
21-
<template #action>
22-
<a>Delete</a>
21+
<template #bodyCell="{ column, text }">
22+
<template v-if="column.key === 'action'">
23+
<a>Delete</a>
24+
</template>
25+
<template v-else>{{ text }}</template>
2326
</template>
2427
<template #expandedRowRender="{ record }">
2528
<p style="margin: 0">
@@ -34,7 +37,7 @@ const columns = [
3437
{ title: 'Name', dataIndex: 'name', key: 'name' },
3538
{ title: 'Age', dataIndex: 'age', key: 'age' },
3639
{ title: 'Address', dataIndex: 'address', key: 'address' },
37-
{ title: 'Action', dataIndex: '', key: 'x', slots: { customRender: 'action' } },
40+
{ title: 'Action', key: 'action' },
3841
];
3942
4043
const data = [

‎components/table/demo/fixed-columns-header.vue

+5-3
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,11 @@ A Solution for displaying large amounts of data with long columns.
2525

2626
<template>
2727
<a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }">
28-
<template #action>
29-
<a>action</a>
28+
<template #bodyCell="{ column, text }">
29+
<template v-if="column.key === 'operation'">
30+
<a>action</a>
31+
</template>
32+
<template v-else>{{ text }}</template>
3033
</template>
3134
</a-table>
3235
</template>
@@ -49,7 +52,6 @@ const columns = [
4952
key: 'operation',
5053
fixed: 'right',
5154
width: 100,
52-
slots: { customRender: 'action' },
5355
},
5456
];
5557

‎components/table/demo/fixed-columns.vue

+5-3
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,11 @@ To fix some columns and scroll inside other columns, and you must set `scroll.x`
2626

2727
<template>
2828
<a-table :columns="columns" :data-source="data" :scroll="{ x: 1300 }">
29-
<template #action>
30-
<a>action</a>
29+
<template #bodyCell="{ column, text }">
30+
<template v-if="column.key === 'operation'">
31+
<a>action</a>
32+
</template>
33+
<template v-else>{{ text }}</template>
3134
</template>
3235
</a-table>
3336
</template>
@@ -50,7 +53,6 @@ const columns = [
5053
key: 'operation',
5154
fixed: 'right',
5255
width: 100,
53-
slots: { customRender: 'action' },
5456
},
5557
];
5658

‎components/table/demo/head.vue

+3-30
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ If a `sortOrder` or `defaultSortOrder` is specified with the value `ascend` or `
2828
<a-table :columns="columns" :data-source="data" @change="onChange" />
2929
</template>
3030
<script lang="ts">
31+
import type { TableColumnType, TableProps } from 'ant-design-vue';
3132
import { defineComponent } from 'vue';
3233
3334
type TableDataType = {
@@ -37,35 +38,7 @@ type TableDataType = {
3738
address: string;
3839
};
3940
40-
type PaginationType = {
41-
current: number;
42-
pageSize: number;
43-
};
44-
45-
type FilterType = {
46-
name: string;
47-
address: string;
48-
};
49-
50-
type ColumnType = {
51-
title: string;
52-
dataIndex: string;
53-
filters?: {
54-
text: string;
55-
value: string;
56-
children?: {
57-
text: string;
58-
value: string;
59-
}[];
60-
}[];
61-
onFilter?: (value: string, record: TableDataType) => boolean;
62-
sorter?: (a: TableDataType, b: TableDataType) => number;
63-
sortDirections?: string[];
64-
defaultSortOrder?: string;
65-
filterMultiple?: string[] | boolean;
66-
};
67-
68-
const columns: ColumnType[] = [
41+
const columns: TableColumnType<TableDataType>[] = [
6942
{
7043
title: 'Name',
7144
dataIndex: 'name',
@@ -153,7 +126,7 @@ const data: TableDataType[] = [
153126
];
154127
export default defineComponent({
155128
setup() {
156-
const onChange = (pagination: PaginationType, filters: FilterType[], sorter: ColumnType) => {
129+
const onChange: TableProps<TableDataType>['onChange'] = (pagination, filters, sorter) => {
157130
console.log('params', pagination, filters, sorter);
158131
};
159132
return {

‎components/table/demo/nested-table.vue

+35-30
Original file line numberDiff line numberDiff line change
@@ -19,34 +19,40 @@ Showing more detailed info of every row.
1919

2020
<template>
2121
<a-table :columns="columns" :data-source="data" class="components-table-demo-nested">
22-
<template #operation>
23-
<a>Publish</a>
22+
<template #bodyCell="{ column, text }">
23+
<template v-if="column.key === 'operation'">
24+
<a>Publish</a>
25+
</template>
26+
<template v-else>{{ text }}</template>
2427
</template>
2528
<template #expandedRowRender>
2629
<a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
27-
<template #status>
28-
<span>
29-
<a-badge status="success" />
30-
Finished
31-
</span>
32-
</template>
33-
<template #operation>
34-
<span class="table-operation">
35-
<a>Pause</a>
36-
<a>Stop</a>
37-
<a-dropdown>
38-
<template #overlay>
39-
<a-menu>
40-
<a-menu-item>Action 1</a-menu-item>
41-
<a-menu-item>Action 2</a-menu-item>
42-
</a-menu>
43-
</template>
44-
<a>
45-
More
46-
<down-outlined />
47-
</a>
48-
</a-dropdown>
49-
</span>
30+
<template #bodyCell="{ column, text }">
31+
<template v-if="column.key === 'state'">
32+
<span>
33+
<a-badge status="success" />
34+
Finished
35+
</span>
36+
</template>
37+
<template v-else-if="column.key === 'operation'">
38+
<span class="table-operation">
39+
<a>Pause</a>
40+
<a>Stop</a>
41+
<a-dropdown>
42+
<template #overlay>
43+
<a-menu>
44+
<a-menu-item>Action 1</a-menu-item>
45+
<a-menu-item>Action 2</a-menu-item>
46+
</a-menu>
47+
</template>
48+
<a>
49+
More
50+
<down-outlined />
51+
</a>
52+
</a-dropdown>
53+
</span>
54+
</template>
55+
<template v-else>{{ text }}</template>
5056
</template>
5157
</a-table>
5258
</template>
@@ -63,7 +69,7 @@ const columns = [
6369
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
6470
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
6571
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
66-
{ title: 'Action', key: 'operation', slots: { customRender: 'operation' } },
72+
{ title: 'Action', key: 'operation' },
6773
];
6874
6975
interface DataItem {
@@ -80,7 +86,7 @@ const data: DataItem[] = [];
8086
for (let i = 0; i < 3; ++i) {
8187
data.push({
8288
key: i,
83-
name: 'Screem',
89+
name: `Screem ${i + 1}`,
8490
platform: 'iOS',
8591
version: '10.3.4.5654',
8692
upgradeNum: 500,
@@ -92,13 +98,12 @@ for (let i = 0; i < 3; ++i) {
9298
const innerColumns = [
9399
{ title: 'Date', dataIndex: 'date', key: 'date' },
94100
{ title: 'Name', dataIndex: 'name', key: 'name' },
95-
{ title: 'Status', key: 'state', slots: { customRender: 'status' } },
101+
{ title: 'Status', key: 'state' },
96102
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
97103
{
98104
title: 'Action',
99105
dataIndex: 'operation',
100106
key: 'operation',
101-
slots: { customRender: 'operation' },
102107
},
103108
];
104109
@@ -114,7 +119,7 @@ for (let i = 0; i < 3; ++i) {
114119
innerData.push({
115120
key: i,
116121
date: '2014-12-24 23:12:00',
117-
name: 'This is production name',
122+
name: `This is production name ${i + 1}`,
118123
upgradeNum: 'Upgraded: 56',
119124
});
120125
}

‎components/table/demo/reset-filter.vue

+3-5
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,7 @@ Control filters and sorters by `filteredValue` and `sortOrder`.
3535
</template>
3636
<script lang="ts">
3737
import { computed, defineComponent, ref } from 'vue';
38-
import { TableState, TableStateFilters } from 'ant-design-vue/es/table/interface';
39-
40-
type Pagination = TableState['pagination'];
38+
import type { TableColumnType, TableProps } from 'ant-design-vue';
4139
4240
interface DataItem {
4341
key: string;
@@ -78,7 +76,7 @@ export default defineComponent({
7876
const filteredInfo = ref();
7977
const sortedInfo = ref();
8078
81-
const columns = computed(() => {
79+
const columns = computed<TableColumnType[]>(() => {
8280
const filtered = filteredInfo.value || {};
8381
const sorted = sortedInfo.value || {};
8482
return [
@@ -120,7 +118,7 @@ export default defineComponent({
120118
];
121119
});
122120
123-
const handleChange = (pagination: Pagination, filters: TableStateFilters, sorter: any) => {
121+
const handleChange: TableProps['onChange'] = (pagination, filters, sorter) => {
124122
console.log('Various parameters', pagination, filters, sorter);
125123
filteredInfo.value = filters;
126124
sortedInfo.value = sorter;

‎components/table/demo/stripe.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ Use `rowClassName` Customize the table with Striped.
2020
size="middle"
2121
:columns="columns"
2222
:data-source="data"
23-
:row-class-name="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
23+
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
2424
/>
2525
<a-table
2626
class="ant-table-striped"
2727
size="middle"
2828
:columns="columns"
2929
:data-source="data"
30-
:row-class-name="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
30+
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
3131
bordered
3232
/>
3333
</template>

‎components/vc-table/Cell/index.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import type {
1515
} from '../interface';
1616
import { getPathValue, validateValue } from '../utils/valueUtil';
1717
import { useInjectSlots } from '../../table/context';
18+
import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil';
1819

1920
function isRenderCell<RecordType = DefaultRecordType>(
2021
data: RenderedCell<RecordType>,
@@ -141,7 +142,12 @@ export default defineComponent<CellProps>({
141142
}
142143
}
143144

144-
if (cellType === 'body' && contextSlots.value.bodyCell && !column.slots?.customRender) {
145+
if (
146+
!(INTERNAL_COL_DEFINE in column) &&
147+
cellType === 'body' &&
148+
contextSlots.value.bodyCell &&
149+
!column.slots?.customRender
150+
) {
145151
childNode = flattenChildren(
146152
contextSlots.value.bodyCell({
147153
text: value,

‎components/vc-table/FixedHolder/index.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
} from 'vue';
1515
import { useInjectTable } from '../context/TableContext';
1616
import classNames from '../../_util/classNames';
17+
import addEventListenerWrap from 'ant-design-vue/es/vc-util/Dom/addEventListener';
1718

1819
function useColumnWidth(colWidthsRef: Ref<readonly number[]>, columCountRef: Ref<number>) {
1920
return computed(() => {
@@ -77,13 +78,14 @@ export default defineComponent<FixedHeaderProps<DefaultRecordType>>({
7778
e.preventDefault();
7879
}
7980
}
81+
const wheelEvent = ref();
8082
onMounted(() => {
8183
nextTick(() => {
82-
scrollRef.value?.addEventListener('wheel', onWheel);
84+
wheelEvent.value = addEventListenerWrap(scrollRef.value, 'wheel', onWheel);
8385
});
8486
});
8587
onBeforeUnmount(() => {
86-
scrollRef.value?.removeEventListener('wheel', onWheel);
88+
wheelEvent.value?.remove();
8789
});
8890

8991
// Check if all flattenColumns has width

‎components/vc-table/Footer/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export interface FooterProps<RecordType = DefaultRecordType> {
1313
export default defineComponent({
1414
name: 'Footer',
1515
props: ['stickyOffsets', 'flattenColumns'],
16+
inheritAttrs: false,
1617
setup(props, { slots }) {
1718
const tableContext = useInjectTable();
1819
useProvideSummary(

‎components/vc-table/Table.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -390,11 +390,15 @@ export default defineComponent<TableProps>({
390390
if (!target) {
391391
return;
392392
}
393+
393394
if (typeof target === 'function') {
394395
target(scrollLeft);
395-
} else if (target.scrollLeft !== scrollLeft) {
396+
return;
397+
}
398+
const domTarget = (target as any).$el || target;
399+
if (domTarget.scrollLeft !== scrollLeft) {
396400
// eslint-disable-next-line no-param-reassign
397-
target.scrollLeft = scrollLeft;
401+
domTarget.scrollLeft = scrollLeft;
398402
}
399403
}
400404

‎components/vc-util/Dom/addEventListener.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import supportsPassive from '../../_util/supportsPassive';
22

33
export default function addEventListenerWrap(target, eventType, cb, option) {
4-
if (target.addEventListener) {
4+
if (target && target.addEventListener) {
55
let opt = option;
66
if (
77
opt === undefined &&
@@ -14,7 +14,7 @@ export default function addEventListenerWrap(target, eventType, cb, option) {
1414
}
1515
return {
1616
remove: () => {
17-
if (target.removeEventListener) {
17+
if (target && target.removeEventListener) {
1818
target.removeEventListener(eventType, cb);
1919
}
2020
},

‎site/debugger/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// debugger tsx
2-
import Demo from '../../components/table/demo/expand-children.vue';
2+
import Demo from '../../components/table/demo/template.vue';
33

44
export default {
55
render() {

0 commit comments

Comments
 (0)