Skip to content

N
najiu-admin-template
Commit 4b384b13 authored by vben's avatar vben
Browse files
Options

perf: perf TableAction

parent 5a6db8c6
Hide whitespace changes
Inline Side-by-side
Showing with 74 additions and 165 deletions
CHANGELOG.zh_CN.md
View file @ 4b384b13
...@@ -8,11 +8,13 @@ ...@@ -8,11 +8,13 @@
### ⚡ Performance Improvements ### ⚡ Performance Improvements
- 优化首屏体积大小 - 优化首屏体积大小
- 优化 TableAction 组件
### 🐛 Bug Fixes ### 🐛 Bug Fixes
- 修复一级菜单折叠显示菜单名问题 - 修复一级菜单折叠显示菜单名问题
- 修复预览命令不打包问题 - 修复预览命令不打包问题
- 修复表格 actionColOptions 参数不生效问题
# 2.0.0-rc.3 (2020-10-19) # 2.0.0-rc.3 (2020-10-19)
......
src/components/Table/src/components/CellResize.tsx deleted 100644 → 0
View file @ 5a6db8c6
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>
);
};
},
});
src/components/Table/src/components/TableAction.tsx
View file @ 4b384b13
...@@ -16,114 +16,93 @@ export default defineComponent({ ...@@ -16,114 +16,93 @@ export default defineComponent({
type: Array as PropType<ActionItem[]>, type: Array as PropType<ActionItem[]>,
default: null, default: null,
}, },
moreText: {
type: String as PropType<string>,
default: '更多',
},
}, },
setup(props) { 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 // 增加按钮的TYPE和COLOR
return () => { return () => {
const { dropDownActions = [], actions } = props; const { dropDownActions = [], actions } = props;
return ( return (
<div class={prefixCls}> <div class={prefixCls}>
{actions && {actions?.map((action, index) => {
actions.length && return renderPopConfirm(action, index);
actions.map((action, index) => { })}
const { {dropDownActions?.length && (
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 && (
<Dropdown> <Dropdown>
{{ {{
default: () => ( default: dropdownDefaultSLot,
<Button type="link" size="small">
{{
default: () => (
<>
更多
<DownOutlined />
</>
),
}}
</Button>
),
overlay: () => { overlay: () => {
return ( return (
<Menu> <Menu>
{{ {{
default: () => { default: () => {
return dropDownActions.map((action, index) => { return dropDownActions.map((action, index) => {
const { const { disabled = false } = action;
disabled = false,
label,
icon,
color = '',
type = 'link',
} = action;
return ( return (
<Menu.Item key={`${index}`} disabled={disabled}> <Menu.Item key={`${index}`} disabled={disabled}>
{() => ( {() => {
<Button return renderPopConfirm(action, index);
type={type} }}
size="small"
{...action}
disabled={disabled}
color={color}
>
{{
default: () => (
<>
{label}
{icon && <Icon icon={icon} />}
</>
),
}}
</Button>
)}
</Menu.Item> </Menu.Item>
); );
}); });
......
src/components/Table/src/components/renderEditableCell.tsx
View file @ 4b384b13
...@@ -46,7 +46,7 @@ const EditableCell = defineComponent({ ...@@ -46,7 +46,7 @@ const EditableCell = defineComponent({
const currentValueRef = ref<string | boolean>(props.value); const currentValueRef = ref<string | boolean>(props.value);
function handleChange(e: ChangeEvent | string | boolean) { 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; currentValueRef.value = (e as ChangeEvent).target.value;
} }
if (isString(e) || isBoolean(e)) { if (isString(e) || isBoolean(e)) {
...@@ -58,7 +58,7 @@ const EditableCell = defineComponent({ ...@@ -58,7 +58,7 @@ const EditableCell = defineComponent({
isEditRef.value = true; isEditRef.value = true;
nextTick(() => { nextTick(() => {
const el = unref(elRef); const el = unref(elRef);
el && el.focus && el.focus(); el?.focus();
}); });
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment