Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
B
basic-vue-admin
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
Basic
basic-vue-admin
Commits
5fab267a
提交
5fab267a
authored
7月 02, 2021
作者:
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(table-action): support `tooltip` option
为tableAction组件中的操作按钮增加tooltip配置 close: #848
上级
5637588f
隐藏空白字符变更
内嵌
并排
正在显示
4 个修改的文件
包含
31 行增加
和
11 行删除
+31
-11
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+4
-0
TableAction.vue
src/components/Table/src/components/TableAction.vue
+22
-8
tableAction.ts
src/components/Table/src/types/tableAction.ts
+2
-0
index.vue
src/views/demo/system/account/index.vue
+3
-3
没有找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
5fab267a
...
@@ -3,6 +3,10 @@
...
@@ -3,6 +3,10 @@
-
**Axios**
新增
`withToken`
配置,用于控制请求是否携带 token
-
**Axios**
新增
`withToken`
配置,用于控制请求是否携带 token
-
**BasicUpload**
新增在预览
`Modal`
中删除文件时触发
`preview-delete`
事件
-
**BasicUpload**
新增在预览
`Modal`
中删除文件时触发
`preview-delete`
事件
-
**BasicUpload**
`value`
支持
`v-model`
用法
-
**BasicUpload**
`value`
支持
`v-model`
用法
-
**Route 配置**
-
增加
`ignoreRoute`
用于在
`ROUTE_MAPPING`
或
`BACK`
权限模式下仅生成菜单
-
增加
`hidePathForChildren`
配置,标识为子项目生成菜单时忽略本级
`path`
-
**TableAction**
新增
`tooltip`
配置,可以为按钮增加 tooltip 提示
### 🐛 Bug Fixes
### 🐛 Bug Fixes
...
...
src/components/Table/src/components/TableAction.vue
浏览文件 @
5fab267a
<
template
>
<
template
>
<div
:class=
"[prefixCls, getAlign]"
@
click=
"onCellClick"
>
<div
:class=
"[prefixCls, getAlign]"
@
click=
"onCellClick"
>
<template
v-for=
"(action, index) in getActions"
:key=
"`$
{index}-${action.label}`">
<template
v-for=
"(action, index) in getActions"
:key=
"`$
{index}-${action.label}`">
<PopConfirmButton
v-bind=
"action"
>
<Tooltip
v-bind=
"getTooltip(action.tooltip)"
>
<Icon
:icon=
"action.icon"
class=
"mr-1"
v-if=
"action.icon"
/>
<PopConfirmButton
v-bind=
"action"
>
{{
action
.
label
}}
<Tooltip
v-bind=
"getTooltip(action.tooltip)"
>
</PopConfirmButton>
<Icon
:icon=
"action.icon"
class=
"mr-1"
v-if=
"action.icon"
/>
{{
action
.
label
}}
</Tooltip>
</PopConfirmButton>
</Tooltip>
<Divider
<Divider
type=
"vertical"
type=
"vertical"
class=
"action-divider"
class=
"action-divider"
...
@@ -31,7 +35,7 @@
...
@@ -31,7 +35,7 @@
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
PropType
,
computed
,
toRaw
}
from
'vue'
;
import
{
defineComponent
,
PropType
,
computed
,
toRaw
}
from
'vue'
;
import
{
MoreOutlined
}
from
'@ant-design/icons-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
Icon
from
'/@/components/Icon/index'
;
import
{
ActionItem
,
TableActionType
}
from
'/@/components/Table'
;
import
{
ActionItem
,
TableActionType
}
from
'/@/components/Table'
;
import
{
PopConfirmButton
}
from
'/@/components/Button'
;
import
{
PopConfirmButton
}
from
'/@/components/Button'
;
...
@@ -39,13 +43,13 @@
...
@@ -39,13 +43,13 @@
import
{
useDesign
}
from
'/@/hooks/web/useDesign'
;
import
{
useDesign
}
from
'/@/hooks/web/useDesign'
;
import
{
useTableContext
}
from
'../hooks/useTableContext'
;
import
{
useTableContext
}
from
'../hooks/useTableContext'
;
import
{
usePermission
}
from
'/@/hooks/web/usePermission'
;
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
{
propTypes
}
from
'/@/utils/propTypes'
;
import
{
ACTION_COLUMN_FLAG
}
from
'../const'
;
import
{
ACTION_COLUMN_FLAG
}
from
'../const'
;
export
default
defineComponent
({
export
default
defineComponent
({
name
:
'TableAction'
,
name
:
'TableAction'
,
components
:
{
Icon
,
PopConfirmButton
,
Divider
,
Dropdown
,
MoreOutlined
},
components
:
{
Icon
,
PopConfirmButton
,
Divider
,
Dropdown
,
MoreOutlined
,
Tooltip
},
props
:
{
props
:
{
actions
:
{
actions
:
{
type
:
Array
as
PropType
<
ActionItem
[]
>
,
type
:
Array
as
PropType
<
ActionItem
[]
>
,
...
@@ -124,6 +128,16 @@
...
@@ -124,6 +128,16 @@
return
actionColumn
?.
align
??
'left'
;
return
actionColumn
?.
align
??
'left'
;
});
});
const
getTooltip
=
computed
(()
=>
{
return
(
data
)
=>
{
if
(
isString
(
data
))
{
return
{
title
:
data
};
}
else
{
return
data
;
}
};
});
function
onCellClick
(
e
:
MouseEvent
)
{
function
onCellClick
(
e
:
MouseEvent
)
{
if
(
!
props
.
stopButtonPropagation
)
return
;
if
(
!
props
.
stopButtonPropagation
)
return
;
const
target
=
e
.
target
as
HTMLElement
;
const
target
=
e
.
target
as
HTMLElement
;
...
@@ -132,7 +146,7 @@
...
@@ -132,7 +146,7 @@
}
}
}
}
return
{
prefixCls
,
getActions
,
getDropdownList
,
getAlign
,
onCellClick
};
return
{
prefixCls
,
getActions
,
getDropdownList
,
getAlign
,
onCellClick
,
getTooltip
};
},
},
});
});
</
script
>
</
script
>
...
...
src/components/Table/src/types/tableAction.ts
浏览文件 @
5fab267a
import
{
ButtonProps
}
from
'ant-design-vue/es/button/buttonTypes'
;
import
{
ButtonProps
}
from
'ant-design-vue/es/button/buttonTypes'
;
import
{
TooltipProps
}
from
'ant-design-vue/es/tooltip/Tooltip'
;
import
{
RoleEnum
}
from
'/@/enums/roleEnum'
;
import
{
RoleEnum
}
from
'/@/enums/roleEnum'
;
export
interface
ActionItem
extends
ButtonProps
{
export
interface
ActionItem
extends
ButtonProps
{
onClick
?:
Fn
;
onClick
?:
Fn
;
...
@@ -12,6 +13,7 @@ export interface ActionItem extends ButtonProps {
...
@@ -12,6 +13,7 @@ export interface ActionItem extends ButtonProps {
auth
?:
RoleEnum
|
RoleEnum
[]
|
string
|
string
[];
auth
?:
RoleEnum
|
RoleEnum
[]
|
string
|
string
[];
// 业务控制是否显示
// 业务控制是否显示
ifShow
?:
boolean
|
((
action
:
ActionItem
)
=>
boolean
);
ifShow
?:
boolean
|
((
action
:
ActionItem
)
=>
boolean
);
tooltip
?:
string
|
TooltipProps
;
}
}
export
interface
PopConfirm
{
export
interface
PopConfirm
{
...
...
src/views/demo/system/account/index.vue
浏览文件 @
5fab267a
...
@@ -10,18 +10,18 @@
...
@@ -10,18 +10,18 @@
:actions=
"[
:actions=
"[
{
{
icon: 'clarity:info-standard-line',
icon: 'clarity:info-standard-line',
t
itle
: '查看用户详情',
t
ooltip
: '查看用户详情',
onClick: handleView.bind(null, record),
onClick: handleView.bind(null, record),
},
},
{
{
icon: 'clarity:note-edit-line',
icon: 'clarity:note-edit-line',
t
itle
: '编辑用户资料',
t
ooltip
: '编辑用户资料',
onClick: handleEdit.bind(null, record),
onClick: handleEdit.bind(null, record),
},
},
{
{
icon: 'ant-design:delete-outlined',
icon: 'ant-design:delete-outlined',
color: 'error',
color: 'error',
t
itle
: '删除此账号',
t
ooltip
: '删除此账号',
popConfirm: {
popConfirm: {
title: '是否确认删除',
title: '是否确认删除',
confirm: handleDelete.bind(null, record),
confirm: handleDelete.bind(null, record),
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论