Skip to content

Commit

Permalink
feat(table-action): add stopButtonPropagation prop
Browse files Browse the repository at this point in the history
为TableAction组件添加stopButtonPropagation来配置是否要阻止操作列的按钮的点击事件冒泡。

close #699
  • Loading branch information
mynetfan committed Jun 5, 2021
1 parent 40e3cb0 commit 808012b
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 8 deletions.
13 changes: 11 additions & 2 deletions src/components/Table/src/components/TableAction.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div :class="[prefixCls, getAlign]">
<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" />
Expand Down Expand Up @@ -56,6 +56,7 @@
},
divider: propTypes.bool.def(true),
outside: propTypes.bool,
stopButtonPropagation: propTypes.bool.def(false),
},
setup(props) {
const { prefixCls } = useDesign('basic-table-action');
Expand Down Expand Up @@ -122,7 +123,15 @@
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>
Expand Down
51 changes: 45 additions & 6 deletions src/views/demo/table/ExpandTable.vue
Original file line number Diff line number Diff line change
@@ -1,33 +1,72 @@
<template>
<div class="p-4">
<PageWrapper
title="可展开表格"
content="不可与scroll共用。TableAction组件可配置stopButtonPropagation来阻止操作按钮的点击事件冒泡,以便配合Table组件的expandRowByClick"
>
<BasicTable @register="registerTable">
<template #expandedRowRender="{ record }">
<span>No: {{ record.no }} </span>
</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>
</div>
</PageWrapper>
</template>
<script lang="ts">
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 { demoListApi } from '/@/api/demo/table';
export default defineComponent({
components: { BasicTable },
components: { BasicTable, TableAction, PageWrapper },
setup() {
const [registerTable] = useTable({
title: '可展开表格',
api: demoListApi,
titleHelpMessage: '不能与scroll共用',
title: '可展开表格演示',
titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
columns: getBasicColumns(),
rowKey: 'id',
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 {
registerTable,
handleDelete,
handleOpen,
};
},
});
Expand Down

0 comments on commit 808012b

Please sign in to comment.