feat(table-action): add stopButtonPropagation prop

为TableAction组件添加stopButtonPropagation来配置是否要阻止操作列的按钮的点击事件冒泡。 close #699
vbenjs · Jun 5, 2021 · 808012b · 808012b
1 parent 40e3cb0
commit 808012b
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 8 deletions.
diff --git 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
@@ -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,
       };
     },
   });