github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-02-03 02:54:40 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

perf: perf TableAction

Browse Source
This commit is contained in:
vben 2020-10-20 23:47:39 +08:00
parent 5a6db8c640
commit 4b384b137c
4 changed files with 74 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.zh_CN.md
View File

@ -8,11 +8,13 @@
### ⚡ Performance Improvements
- 优化首屏体积大小
- 优化 TableAction 组件
### 🐛 Bug Fixes
- 修复一级菜单折叠显示菜单名问题
- 修复预览命令不打包问题
- 修复表格 actionColOptions 参数不生效问题
# 2.0.0-rc.3 (2020-10-19)

72
src/components/Table/src/components/CellResize.tsx
View File

@ -1,72 +0,0 @@
import { defineComponent, ref, computed, unref } from 'vue';
import { injectTable } from '../hooks/useProvinceTable';
import { getSlot } from '/@/utils/helper/tsxHelper';
import VueDraggableResizable from 'vue-draggable-resizable';
export default defineComponent({
name: 'DragResize',
setup(props, { slots, attrs }) {
const elRef = ref<HTMLTableRowElement | null>(null);
const draggingMapRef = ref<{ [key in string]: number | string }>({});
const tableInstance = injectTable();
const getColumnsRef = computed(() => {
const columns = tableInstance.getColumns();
columns.forEach((col) => {
const { key } = col;
if (key) {
draggingMapRef.value[key] = col.width as number;
}
});
return columns;
});
return () => {
const { key = '', ...restProps } = { ...attrs };
const col = unref(getColumnsRef).find((col) => {
const k = col.dataIndex || col.key;
return k === key;
});
if (!col || !col.width) {
return <th {...restProps}>{getSlot(slots, 'default')}</th>;
}
const onDrag = (x: number) => {
draggingMapRef.value[key] = 0;
col.width = Math.max(x, 1);
};
const onDragstop = () => {
const el = unref(elRef);
if (!el) {
return;
}
draggingMapRef.value[key] = el.getBoundingClientRect().width;
};
return (
<th
{...restProps}
class="resize-table-th"
ref={elRef}
style={{
width: `${col.width}px`,
}}
>
{getSlot(slots, 'default')}
<VueDraggableResizable
key={col.key}
class="table-draggable-handle"
w={10}
x={draggingMapRef.value[key] || col.width}
z={1}
axis="x"
draggable={true}
resizable={false}
onDragging={onDrag}
onDragstop={onDragstop}
/>
</th>
);
};
},
});

161
src/components/Table/src/components/TableAction.tsx
View File

@ -16,114 +16,93 @@ export default defineComponent({
type: Array as PropType<ActionItem[]>,
default: null,
},
moreText: {
type: String as PropType<string>,
default: '更多',
},
},
setup(props) {
function renderButton(action: ActionItem, index: number) {
const { disabled = false, label, icon, color = '', type = 'link' } = action;
const button = (
<Button type={type} size="small" disabled={disabled} color={color} {...action} key={index}>
{() => (
<>
{label}
{icon && <Icon icon={icon} />}
</>
)}
</Button>
);
return button;
}
function renderPopConfirm(action: ActionItem, index: number) {
const { popConfirm = null } = action;
if (!popConfirm) {
return renderButton(action, index);
}
const {
title,
okText = '确定',
cancelText = '取消',
confirm = () => {},
cancel = () => {},
icon = '',
} = popConfirm;
return (
<Popconfirm
key={`P-${index}`}
title={title}
onConfirm={confirm}
onCancel={cancel}
okText={okText}
cancelText={cancelText}
icon={icon}
>
{() => renderButton(action, index)}
</Popconfirm>
);
}
const dropdownDefaultSLot = () => (
<Button type="link" size="small">
{{
default: () => (
<>
{props.moreText}
<DownOutlined />
</>
),
}}
</Button>
);
// 增加按钮的TYPE和COLOR
return () => {
const { dropDownActions = [], actions } = props;
return (
<div class={prefixCls}>
{actions &&
actions.length &&
actions.map((action, index) => {
const {
disabled = false,
label,
icon,
color = '',
type = 'link',
popConfirm = null,
} = action;
const button = (
<Button
type={type}
size="small"
disabled={disabled}
color={color}
{...action}
key={index}
>
{() => (
<>
{label}
{icon && <Icon icon={icon} />}
</>
)}
</Button>
);
if (popConfirm !== null) {
const {
title,
okText = '确定',
cancelText = '取消',
confirm = () => {},
cancel = () => {},
icon = '',
} = popConfirm;
return (
<Popconfirm
key={`P-${index}`}
title={title}
onConfirm={confirm}
onCancel={cancel}
okText={okText}
cancelText={cancelText}
icon={icon}
>
{() => button}
</Popconfirm>
);
}
return button;
})}
{dropDownActions && dropDownActions.length && (
{actions?.map((action, index) => {
return renderPopConfirm(action, index);
})}
{dropDownActions?.length && (
<Dropdown>
{{
default: () => (
<Button type="link" size="small">
{{
default: () => (
<>
更多
<DownOutlined />
</>
),
}}
</Button>
),
default: dropdownDefaultSLot,
overlay: () => {
return (
<Menu>
{{
default: () => {
return dropDownActions.map((action, index) => {
const {
disabled = false,
label,
icon,
color = '',
type = 'link',
} = action;
const { disabled = false } = action;
return (
<Menu.Item key={`${index}`} disabled={disabled}>
{() => (
<Button
type={type}
size="small"
{...action}
disabled={disabled}
color={color}
>
{{
default: () => (
<>
{label}
{icon && <Icon icon={icon} />}
</>
),
}}
</Button>
)}
{() => {
return renderPopConfirm(action, index);
}}
</Menu.Item>
);
});

4
src/components/Table/src/components/renderEditableCell.tsx
View File

@ -46,7 +46,7 @@ const EditableCell = defineComponent({
const currentValueRef = ref<string | boolean>(props.value);
function handleChange(e: ChangeEvent | string | boolean) {
if ((e as ChangeEvent).target && Reflect.has((e as ChangeEvent).target, 'value')) {
if (Reflect.has((e as ChangeEvent)?.target, 'value')) {
currentValueRef.value = (e as ChangeEvent).target.value;
}
if (isString(e) || isBoolean(e)) {
@ -58,7 +58,7 @@ const EditableCell = defineComponent({
isEditRef.value = true;
nextTick(() => {
const el = unref(elRef);
el && el.focus && el.focus();
el?.focus();
});
}