提交 808012b5 作者: 无木

feat(table-action): add stopButtonPropagation prop

为TableAction组件添加stopButtonPropagation来配置是否要阻止操作列的按钮的点击事件冒泡。

close #699
上级 40e3cb04
<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>
......
<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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论