Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Simoje丶
vue-vben-admin
提交
4b384b13
V
vue-vben-admin
项目概览
Simoje丶
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
4b384b13
编写于
10月 20, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
perf: perf TableAction
上级
5a6db8c6
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
74 addition
and
165 deletion
+74
-165
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+2
-0
src/components/Table/src/components/CellResize.tsx
src/components/Table/src/components/CellResize.tsx
+0
-72
src/components/Table/src/components/TableAction.tsx
src/components/Table/src/components/TableAction.tsx
+70
-91
src/components/Table/src/components/renderEditableCell.tsx
src/components/Table/src/components/renderEditableCell.tsx
+2
-2
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
4b384b13
...
...
@@ -8,11 +8,13 @@
### ⚡ Performance Improvements
-
优化首屏体积大小
-
优化 TableAction 组件
### 🐛 Bug Fixes
-
修复一级菜单折叠显示菜单名问题
-
修复预览命令不打包问题
-
修复表格 actionColOptions 参数不生效问题
# 2.0.0-rc.3 (2020-10-19)
...
...
src/components/Table/src/components/CellResize.tsx
已删除
100644 → 0
浏览文件 @
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
浏览文件 @
4b384b13
...
...
@@ -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
>
);
});
...
...
src/components/Table/src/components/renderEditableCell.tsx
浏览文件 @
4b384b13
...
...
@@ -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
();
});
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录