Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
B
basic-vue-admin
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
Basic
basic-vue-admin
Commits
808012b5
提交
808012b5
authored
6月 05, 2021
作者:
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(table-action): add stopButtonPropagation prop
为TableAction组件添加stopButtonPropagation来配置是否要阻止操作列的按钮的点击事件冒泡。 close #699
上级
40e3cb04
隐藏空白字符变更
内嵌
并排
正在显示
2 个修改的文件
包含
56 行增加
和
8 行删除
+56
-8
TableAction.vue
src/components/Table/src/components/TableAction.vue
+11
-2
ExpandTable.vue
src/views/demo/table/ExpandTable.vue
+45
-6
没有找到文件。
src/components/Table/src/components/TableAction.vue
浏览文件 @
808012b5
<
template
>
<
template
>
<div
:class=
"[prefixCls, getAlign]"
>
<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"
>
<PopConfirmButton
v-bind=
"action"
>
<Icon
:icon=
"action.icon"
class=
"mr-1"
v-if=
"action.icon"
/>
<Icon
:icon=
"action.icon"
class=
"mr-1"
v-if=
"action.icon"
/>
...
@@ -56,6 +56,7 @@
...
@@ -56,6 +56,7 @@
},
},
divider
:
propTypes
.
bool
.
def
(
true
),
divider
:
propTypes
.
bool
.
def
(
true
),
outside
:
propTypes
.
bool
,
outside
:
propTypes
.
bool
,
stopButtonPropagation
:
propTypes
.
bool
.
def
(
false
),
},
},
setup
(
props
)
{
setup
(
props
)
{
const
{
prefixCls
}
=
useDesign
(
'basic-table-action'
);
const
{
prefixCls
}
=
useDesign
(
'basic-table-action'
);
...
@@ -122,7 +123,15 @@
...
@@ -122,7 +123,15 @@
return
actionColumn
?.
align
??
'left'
;
return
actionColumn
?.
align
??
'left'
;
});
});
return
{
prefixCls
,
getActions
,
getDropdownList
,
getAlign
};
function
onCellClick
(
e
:
MouseEvent
)
{
if
(
!
props
.
stopButtonPropagation
)
return
;
const
target
=
e
.
target
as
HTMLElement
;
if
(
target
.
tagName
===
'BUTTON'
)
{
e
.
stopPropagation
();
}
}
return
{
prefixCls
,
getActions
,
getDropdownList
,
getAlign
,
onCellClick
};
},
},
});
});
</
script
>
</
script
>
...
...
src/views/demo/table/ExpandTable.vue
浏览文件 @
808012b5
<
template
>
<
template
>
<div
class=
"p-4"
>
<PageWrapper
title=
"可展开表格"
content=
"不可与scroll共用。TableAction组件可配置stopButtonPropagation来阻止操作按钮的点击事件冒泡,以便配合Table组件的expandRowByClick"
>
<BasicTable
@
register=
"registerTable"
>
<BasicTable
@
register=
"registerTable"
>
<template
#
expandedRowRender=
"
{ record }">
<template
#
expandedRowRender=
"
{ record }">
<span>
No:
{{
record
.
no
}}
</span>
<span>
No:
{{
record
.
no
}}
</span>
</
template
>
</
template
>
<
template
#
action=
"{ record }"
>
<TableAction
stopButtonPropagation
:actions=
"[
{
label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
},
]"
:dropDownActions="[
{
label: '启用',
popConfirm: {
title: '是否启用?',
confirm: handleOpen.bind(null, record),
},
},
]"
/>
</
template
>
</BasicTable>
</BasicTable>
</
div
>
</
PageWrapper
>
</template>
</template>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'vue'
;
import
{
defineComponent
}
from
'vue'
;
import
{
BasicTable
,
useTable
}
from
'/@/components/Table'
;
import
{
BasicTable
,
useTable
,
TableAction
}
from
'/@/components/Table'
;
import
{
PageWrapper
}
from
'/@/components/Page'
;
import
{
getBasicColumns
}
from
'./tableData'
;
import
{
getBasicColumns
}
from
'./tableData'
;
import
{
demoListApi
}
from
'/@/api/demo/table'
;
import
{
demoListApi
}
from
'/@/api/demo/table'
;
export
default
defineComponent
({
export
default
defineComponent
({
components
:
{
BasicTable
},
components
:
{
BasicTable
,
TableAction
,
PageWrapper
},
setup
()
{
setup
()
{
const
[
registerTable
]
=
useTable
({
const
[
registerTable
]
=
useTable
({
title
:
'可展开表格'
,
api
:
demoListApi
,
api
:
demoListApi
,
titleHelpMessage
:
'不能与scroll共用'
,
title
:
'可展开表格演示'
,
titleHelpMessage
:
[
'已启用expandRowByClick'
,
'已启用stopButtonPropagation'
],
columns
:
getBasicColumns
(),
columns
:
getBasicColumns
(),
rowKey
:
'id'
,
rowKey
:
'id'
,
canResize
:
false
,
canResize
:
false
,
expandRowByClick
:
true
,
actionColumn
:
{
width
:
160
,
title
:
'Action'
,
slots
:
{
customRender
:
'action'
},
},
});
});
function
handleDelete
(
record
:
Recordable
)
{
console
.
log
(
'点击了删除'
,
record
);
}
function
handleOpen
(
record
:
Recordable
)
{
console
.
log
(
'点击了启用'
,
record
);
}
return
{
return
{
registerTable
,
registerTable
,
handleDelete
,
handleOpen
,
};
};
},
},
});
});
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论