Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
球球不吃虾
vue-vben-admin
提交
5fab267a
V
vue-vben-admin
项目概览
球球不吃虾
/
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,体验更适合开发者的 AI 搜索 >>
提交
5fab267a
编写于
7月 02, 2021
作者:
无
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(table-action): support `tooltip` option
为tableAction组件中的操作按钮增加tooltip配置 close: #848
上级
5637588f
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
31 addition
and
11 deletion
+31
-11
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+4
-0
src/components/Table/src/components/TableAction.vue
src/components/Table/src/components/TableAction.vue
+22
-8
src/components/Table/src/types/tableAction.ts
src/components/Table/src/types/tableAction.ts
+2
-0
src/views/demo/system/account/index.vue
src/views/demo/system/account/index.vue
+3
-3
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
5fab267a
...
...
@@ -3,6 +3,10 @@
-
**Axios**
新增
`withToken`
配置,用于控制请求是否携带 token
-
**BasicUpload**
新增在预览
`Modal`
中删除文件时触发
`preview-delete`
事件
-
**BasicUpload**
`value`
支持
`v-model`
用法
-
**Route 配置**
-
增加
`ignoreRoute`
用于在
`ROUTE_MAPPING`
或
`BACK`
权限模式下仅生成菜单
-
增加
`hidePathForChildren`
配置,标识为子项目生成菜单时忽略本级
`path`
-
**TableAction**
新增
`tooltip`
配置,可以为按钮增加 tooltip 提示
### 🐛 Bug Fixes
...
...
src/components/Table/src/components/TableAction.vue
浏览文件 @
5fab267a
<
template
>
<div
:class=
"[prefixCls, getAlign]"
@
click=
"onCellClick"
>
<template
v-for=
"(action, index) in getActions"
:key=
"`$
{index}-${action.label}`">
<PopConfirmButton
v-bind=
"action"
>
<Icon
:icon=
"action.icon"
class=
"mr-1"
v-if=
"action.icon"
/>
{{
action
.
label
}}
</PopConfirmButton>
<Tooltip
v-bind=
"getTooltip(action.tooltip)"
>
<PopConfirmButton
v-bind=
"action"
>
<Tooltip
v-bind=
"getTooltip(action.tooltip)"
>
<Icon
:icon=
"action.icon"
class=
"mr-1"
v-if=
"action.icon"
/>
{{
action
.
label
}}
</Tooltip>
</PopConfirmButton>
</Tooltip>
<Divider
type=
"vertical"
class=
"action-divider"
...
...
@@ -31,7 +35,7 @@
<
script
lang=
"ts"
>
import
{
defineComponent
,
PropType
,
computed
,
toRaw
}
from
'
vue
'
;
import
{
MoreOutlined
}
from
'
@ant-design/icons-vue
'
;
import
{
Divider
}
from
'
ant-design-vue
'
;
import
{
Divider
,
Tooltip
}
from
'
ant-design-vue
'
;
import
Icon
from
'
/@/components/Icon/index
'
;
import
{
ActionItem
,
TableActionType
}
from
'
/@/components/Table
'
;
import
{
PopConfirmButton
}
from
'
/@/components/Button
'
;
...
...
@@ -39,13 +43,13 @@
import
{
useDesign
}
from
'
/@/hooks/web/useDesign
'
;
import
{
useTableContext
}
from
'
../hooks/useTableContext
'
;
import
{
usePermission
}
from
'
/@/hooks/web/usePermission
'
;
import
{
isBoolean
,
isFunction
}
from
'
/@/utils/is
'
;
import
{
isBoolean
,
isFunction
,
isString
}
from
'
/@/utils/is
'
;
import
{
propTypes
}
from
'
/@/utils/propTypes
'
;
import
{
ACTION_COLUMN_FLAG
}
from
'
../const
'
;
export
default
defineComponent
({
name
:
'
TableAction
'
,
components
:
{
Icon
,
PopConfirmButton
,
Divider
,
Dropdown
,
MoreOutlined
},
components
:
{
Icon
,
PopConfirmButton
,
Divider
,
Dropdown
,
MoreOutlined
,
Tooltip
},
props
:
{
actions
:
{
type
:
Array
as
PropType
<
ActionItem
[]
>
,
...
...
@@ -124,6 +128,16 @@
return
actionColumn
?.
align
??
'
left
'
;
});
const
getTooltip
=
computed
(()
=>
{
return
(
data
)
=>
{
if
(
isString
(
data
))
{
return
{
title
:
data
};
}
else
{
return
data
;
}
};
});
function
onCellClick
(
e
:
MouseEvent
)
{
if
(
!
props
.
stopButtonPropagation
)
return
;
const
target
=
e
.
target
as
HTMLElement
;
...
...
@@ -132,7 +146,7 @@
}
}
return
{
prefixCls
,
getActions
,
getDropdownList
,
getAlign
,
onCellClick
};
return
{
prefixCls
,
getActions
,
getDropdownList
,
getAlign
,
onCellClick
,
getTooltip
};
},
});
</
script
>
...
...
src/components/Table/src/types/tableAction.ts
浏览文件 @
5fab267a
import
{
ButtonProps
}
from
'
ant-design-vue/es/button/buttonTypes
'
;
import
{
TooltipProps
}
from
'
ant-design-vue/es/tooltip/Tooltip
'
;
import
{
RoleEnum
}
from
'
/@/enums/roleEnum
'
;
export
interface
ActionItem
extends
ButtonProps
{
onClick
?:
Fn
;
...
...
@@ -12,6 +13,7 @@ export interface ActionItem extends ButtonProps {
auth
?:
RoleEnum
|
RoleEnum
[]
|
string
|
string
[];
// 业务控制是否显示
ifShow
?:
boolean
|
((
action
:
ActionItem
)
=>
boolean
);
tooltip
?:
string
|
TooltipProps
;
}
export
interface
PopConfirm
{
...
...
src/views/demo/system/account/index.vue
浏览文件 @
5fab267a
...
...
@@ -10,18 +10,18 @@
:actions=
"[
{
icon: 'clarity:info-standard-line',
t
itle
: '查看用户详情',
t
ooltip
: '查看用户详情',
onClick: handleView.bind(null, record),
},
{
icon: 'clarity:note-edit-line',
t
itle
: '编辑用户资料',
t
ooltip
: '编辑用户资料',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
t
itle
: '删除此账号',
t
ooltip
: '删除此账号',
popConfirm: {
title: '是否确认删除',
confirm: handleDelete.bind(null, record),
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录