canrd-outside / order-erp-front · Commits

Commit 4b384b137c58428f0cf28621e183250da4576479

Authored by vben
1 parent 5a6db8c6

perf: perf TableAction

Inline Side-by-side
Showing 4 changed files with 74 additions and 165 deletions
CHANGELOG.zh_CN.md
  View file @4b384b1
@@ -8,11 +8,13 @@ @@ -8,11 +8,13 @@
8 ### ⚡ Performance Improvements 8 ### ⚡ Performance Improvements
9 9
10 - 优化首屏体积大小 10 - 优化首屏体积大小
  11 +- 优化 TableAction 组件
11 12
12 ### 🐛 Bug Fixes 13 ### 🐛 Bug Fixes
13 14
14 - 修复一级菜单折叠显示菜单名问题 15 - 修复一级菜单折叠显示菜单名问题
15 - 修复预览命令不打包问题 16 - 修复预览命令不打包问题
  17 +- 修复表格 actionColOptions 参数不生效问题
16 18
17 # 2.0.0-rc.3 (2020-10-19) 19 # 2.0.0-rc.3 (2020-10-19)
18 20
src/components/Table/src/components/CellResize.tsx deleted 100644 → 0
  View file @5a6db8c
1 -import { defineComponent, ref, computed, unref } from 'vue';  
2 -import { injectTable } from '../hooks/useProvinceTable';  
3 -import { getSlot } from '/@/utils/helper/tsxHelper';  
4 -  
5 -import VueDraggableResizable from 'vue-draggable-resizable';  
6 -export default defineComponent({  
7 - name: 'DragResize',  
8 - setup(props, { slots, attrs }) {  
9 - const elRef = ref<HTMLTableRowElement | null>(null);  
10 - const draggingMapRef = ref<{ [key in string]: number | string }>({});  
11 -  
12 - const tableInstance = injectTable();  
13 -  
14 - const getColumnsRef = computed(() => {  
15 - const columns = tableInstance.getColumns();  
16 - columns.forEach((col) => {  
17 - const { key } = col;  
18 - if (key) {  
19 - draggingMapRef.value[key] = col.width as number;  
20 - }  
21 - });  
22 - return columns;  
23 - });  
24 -  
25 - return () => {  
26 - const { key = '', ...restProps } = { ...attrs };  
27 - const col = unref(getColumnsRef).find((col) => {  
28 - const k = col.dataIndex || col.key;  
29 - return k === key;  
30 - });  
31 - if (!col || !col.width) {  
32 - return <th {...restProps}>{getSlot(slots, 'default')}</th>;  
33 - }  
34 - const onDrag = (x: number) => {  
35 - draggingMapRef.value[key] = 0;  
36 - col.width = Math.max(x, 1);  
37 - };  
38 -  
39 - const onDragstop = () => {  
40 - const el = unref(elRef);  
41 - if (!el) {  
42 - return;  
43 - }  
44 - draggingMapRef.value[key] = el.getBoundingClientRect().width;  
45 - };  
46 - return (  
47 - <th  
48 - {...restProps}  
49 - class="resize-table-th"  
50 - ref={elRef}  
51 - style={{  
52 - width: `${col.width}px`,  
53 - }}  
54 - >  
55 - {getSlot(slots, 'default')}  
56 - <VueDraggableResizable  
57 - key={col.key}  
58 - class="table-draggable-handle"  
59 - w={10}  
60 - x={draggingMapRef.value[key] || col.width}  
61 - z={1}  
62 - axis="x"  
63 - draggable={true}  
64 - resizable={false}  
65 - onDragging={onDrag}  
66 - onDragstop={onDragstop}  
67 - />  
68 - </th>  
69 - );  
70 - };  
71 - },  
72 -});  
src/components/Table/src/components/TableAction.tsx
  View file @4b384b1
@@ -16,114 +16,93 @@ export default defineComponent({ @@ -16,114 +16,93 @@ export default defineComponent({
16 type: Array as PropType<ActionItem[]>, 16 type: Array as PropType<ActionItem[]>,
17 default: null, 17 default: null,
18 }, 18 },
  19 +
  20 + moreText: {
  21 + type: String as PropType<string>,
  22 + default: '更多',
  23 + },
19 }, 24 },
20 setup(props) { 25 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 +
21 // 增加按钮的TYPE和COLOR 82 // 增加按钮的TYPE和COLOR
22 return () => { 83 return () => {
23 const { dropDownActions = [], actions } = props; 84 const { dropDownActions = [], actions } = props;
24 return ( 85 return (
25 <div class={prefixCls}> 86 <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 && (
80 <Dropdown> 91 <Dropdown>
81 {{ 92 {{
82 - default: () => (  
83 - <Button type="link" size="small">  
84 - {{  
85 - default: () => (  
86 - <>  
87 - 更多  
88 - <DownOutlined />  
89 - </>  
90 - ),  
91 - }}  
92 - </Button>  
93 - ), 93 + default: dropdownDefaultSLot,
94 overlay: () => { 94 overlay: () => {
95 return ( 95 return (
96 <Menu> 96 <Menu>
97 {{ 97 {{
98 default: () => { 98 default: () => {
99 return dropDownActions.map((action, index) => { 99 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;
107 return ( 101 return (
108 <Menu.Item key={`${index}`} disabled={disabled}> 102 <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 + }}
127 </Menu.Item> 106 </Menu.Item>
128 ); 107 );
129 }); 108 });
src/components/Table/src/components/renderEditableCell.tsx
  View file @4b384b1
@@ -46,7 +46,7 @@ const EditableCell = defineComponent({ @@ -46,7 +46,7 @@ const EditableCell = defineComponent({
46 const currentValueRef = ref<string | boolean>(props.value); 46 const currentValueRef = ref<string | boolean>(props.value);
47 47
48 function handleChange(e: ChangeEvent | string | boolean) { 48 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')) {
50 currentValueRef.value = (e as ChangeEvent).target.value; 50 currentValueRef.value = (e as ChangeEvent).target.value;
51 } 51 }
52 if (isString(e) || isBoolean(e)) { 52 if (isString(e) || isBoolean(e)) {
@@ -58,7 +58,7 @@ const EditableCell = defineComponent({ @@ -58,7 +58,7 @@ const EditableCell = defineComponent({
58 isEditRef.value = true; 58 isEditRef.value = true;
59 nextTick(() => { 59 nextTick(() => {
60 const el = unref(elRef); 60 const el = unref(elRef);
61 - el && el.focus && el.focus(); 61 + el?.focus();
62 }); 62 });
63 } 63 }
64 64