Skip to content

Commit 4b384b1

Browse files
anncwbanncwb
committed
perf: perf TableAction
1 parent 5a6db8c commit 4b384b1

File tree

4 files changed

+74
-165
lines changed

4 files changed

+74
-165
lines changed

‎CHANGELOG.zh_CN.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@
88
### ⚡ Performance Improvements
99

1010
- 优化首屏体积大小
11+
- 优化 TableAction 组件
1112

1213
### 🐛 Bug Fixes
1314

1415
- 修复一级菜单折叠显示菜单名问题
1516
- 修复预览命令不打包问题
17+
- 修复表格 actionColOptions 参数不生效问题
1618

1719
# 2.0.0-rc.3 (2020-10-19)
1820

‎src/components/Table/src/components/CellResize.tsx‎

Lines changed: 0 additions & 72 deletions
This file was deleted.

‎src/components/Table/src/components/TableAction.tsx‎

Lines changed: 70 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -16,114 +16,93 @@ export default defineComponent({
1616
type: Array as PropType<ActionItem[]>,
1717
default: null,
1818
},
19+
20+
moreText: {
21+
type: String as PropType<string>,
22+
default: '更多',
23+
},
1924
},
2025
setup(props) {
26+
function renderButton(action: ActionItem, index: number) {
27+
const { disabled = false, label, icon, color = '', type = 'link' } = action;
28+
const button = (
29+
<Button type={type} size="small" disabled={disabled} color={color} {...action} key={index}>
30+
{() => (
31+
<>
32+
{label}
33+
{icon && <Icon icon={icon} />}
34+
</>
35+
)}
36+
</Button>
37+
);
38+
return button;
39+
}
40+
41+
function renderPopConfirm(action: ActionItem, index: number) {
42+
const { popConfirm = null } = action;
43+
if (!popConfirm) {
44+
return renderButton(action, index);
45+
}
46+
const {
47+
title,
48+
okText = '确定',
49+
cancelText = '取消',
50+
confirm = () => {},
51+
cancel = () => {},
52+
icon = '',
53+
} = popConfirm;
54+
return (
55+
<Popconfirm
56+
key={`P-${index}`}
57+
title={title}
58+
onConfirm={confirm}
59+
onCancel={cancel}
60+
okText={okText}
61+
cancelText={cancelText}
62+
icon={icon}
63+
>
64+
{() => renderButton(action, index)}
65+
</Popconfirm>
66+
);
67+
}
68+
69+
const dropdownDefaultSLot = () => (
70+
<Button type="link" size="small">
71+
{{
72+
default: () => (
73+
<>
74+
{props.moreText}
75+
<DownOutlined />
76+
</>
77+
),
78+
}}
79+
</Button>
80+
);
81+
2182
// 增加按钮的TYPE和COLOR
2283
return () => {
2384
const { dropDownActions = [], actions } = props;
2485
return (
2586
<div class={prefixCls}>
26-
{actions &&
27-
actions.length &&
28-
actions.map((action, index) => {
29-
const {
30-
disabled = false,
31-
label,
32-
icon,
33-
color = '',
34-
type = 'link',
35-
popConfirm = null,
36-
} = action;
37-
const button = (
38-
<Button
39-
type={type}
40-
size="small"
41-
disabled={disabled}
42-
color={color}
43-
{...action}
44-
key={index}
45-
>
46-
{() => (
47-
<>
48-
{label}
49-
{icon && <Icon icon={icon} />}
50-
</>
51-
)}
52-
</Button>
53-
);
54-
if (popConfirm !== null) {
55-
const {
56-
title,
57-
okText = '确定',
58-
cancelText = '取消',
59-
confirm = () => {},
60-
cancel = () => {},
61-
icon = '',
62-
} = popConfirm;
63-
return (
64-
<Popconfirm
65-
key={`P-${index}`}
66-
title={title}
67-
onConfirm={confirm}
68-
onCancel={cancel}
69-
okText={okText}
70-
cancelText={cancelText}
71-
icon={icon}
72-
>
73-
{() => button}
74-
</Popconfirm>
75-
);
76-
}
77-
return button;
78-
})}
79-
{dropDownActions && dropDownActions.length && (
87+
{actions?.map((action, index) => {
88+
return renderPopConfirm(action, index);
89+
})}
90+
{dropDownActions?.length && (
8091
<Dropdown>
8192
{{
82-
default: () => (
83-
<Button type="link" size="small">
84-
{{
85-
default: () => (
86-
<>
87-
更多
88-
<DownOutlined />
89-
</>
90-
),
91-
}}
92-
</Button>
93-
),
93+
default: dropdownDefaultSLot,
9494
overlay: () => {
9595
return (
9696
<Menu>
9797
{{
9898
default: () => {
9999
return dropDownActions.map((action, index) => {
100-
const {
101-
disabled = false,
102-
label,
103-
icon,
104-
color = '',
105-
type = 'link',
106-
} = action;
100+
const { disabled = false } = action;
107101
return (
108102
<Menu.Item key={`${index}`} disabled={disabled}>
109-
{() => (
110-
<Button
111-
type={type}
112-
size="small"
113-
{...action}
114-
disabled={disabled}
115-
color={color}
116-
>
117-
{{
118-
default: () => (
119-
<>
120-
{label}
121-
{icon && <Icon icon={icon} />}
122-
</>
123-
),
124-
}}
125-
</Button>
126-
)}
103+
{() => {
104+
return renderPopConfirm(action, index);
105+
}}
127106
</Menu.Item>
128107
);
129108
});

‎src/components/Table/src/components/renderEditableCell.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const EditableCell = defineComponent({
4646
const currentValueRef = ref<string | boolean>(props.value);
4747

4848
function handleChange(e: ChangeEvent | string | boolean) {
49-
if ((e as ChangeEvent).target && Reflect.has((e as ChangeEvent).target, 'value')) {
49+
if (Reflect.has((e as ChangeEvent)?.target, 'value')) {
5050
currentValueRef.value = (e as ChangeEvent).target.value;
5151
}
5252
if (isString(e) || isBoolean(e)) {
@@ -58,7 +58,7 @@ const EditableCell = defineComponent({
5858
isEditRef.value = true;
5959
nextTick(() => {
6060
const el = unref(elRef);
61-
el && el.focus && el.focus();
61+
el?.focus();
6262
});
6363
}
6464

0 commit comments

Comments
 (0)