From 808012b544b8c6f3cf467f42653c2783dbe8be6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Sat, 5 Jun 2021 12:58:07 +0800
Subject: [PATCH] feat(table-action): add stopButtonPropagation prop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

close #699
---
 .../Table/src/components/TableAction.vue      | 13 ++++-
 src/views/demo/table/ExpandTable.vue          | 51 ++++++++++++++++---
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/src/components/Table/src/components/TableAction.vue b/src/components/Table/src/components/TableAction.vue
index ad20503eec2..c6968dbff2b 100644
--- a/src/components/Table/src/components/TableAction.vue
+++ b/src/components/Table/src/components/TableAction.vue
@@ -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" />
@@ -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');
@@ -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>
diff --git a/src/views/demo/table/ExpandTable.vue b/src/views/demo/table/ExpandTable.vue
index 036b48e3514..5f48c6dcf03 100644
--- a/src/views/demo/table/ExpandTable.vue
+++ b/src/views/demo/table/ExpandTable.vue
@@ -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,
       };
     },
   });