Merge pull request #564 from beansmile/fix-table-header-filter-click-…

…propagation fix: table filter 触发阻止冒泡, 避免与 sort 同时触发
beansmile · May 9, 2024 · 8aed93c · 8aed93c
2 parents 9103204 + 14836f2
commit 8aed93c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/src/plugin/components/table/header-filter.vue b/src/plugin/components/table/header-filter.vue
@@ -1,8 +1,18 @@
 <template>
   <el-popover width="150px">
-    <div class="admin-table-header-filter-trigger" slot="reference" :class="{ isActive }">
+    <!--
+      sort 点击事件由 ele 控制, 我们无法控制, 只能通过阻止冒泡屏蔽其中一种触发方式, 避免与 filter 事件同时触发
+      源码: https://github.com/ElemeFE/element/blob/c345bb453bf11badb4831a6a3f600c9372b3a336/packages/table/src/table-header.js#L330
+      由源码得知事件分别加在两个地方, 1. 两个三角形的排序指示器; 2. 父级 th 标签上
+    -->
+    <div
+      class="admin-table-header-filter-trigger"
+      slot="reference"
+      :class="{ isActive }"
+      @click.stop
+    >
       <slot />
-      <i class="icon el-icon-arrow-down"></i>
+      <i class="icon el-icon-arrow-down" style="cursor: pointer;"></i>
     </div>
     <AdminFilter
       class="admin-table-header-filter"

diff --git a/src/plugin/components/table/index.vue b/src/plugin/components/table/index.vue
@@ -106,17 +106,19 @@ export default class AdminTable extends Vue {
         />
       ) : (column.label || '');
       return (
-        filterColumns ? (
-          <HeaderFilter
-            columns={column.filterColumns}
-            value={this.filterForm}
-            onChange={this.handleHeaderFilterChange}
-            onFilter={(e) => this.handleHeaderFilter(e)}
-            onReset={() => this.handleHeaderFilterReset(filterColumns)}
-          >
-            {renderLabel()}
-          </HeaderFilter>
-        ) : renderLabel()
+        <span>
+          {/* label 仅触发 sort, filter 由内部的箭头图标触发 */}
+          {renderLabel()}
+          {filterColumns ? (
+            <HeaderFilter
+              columns={column.filterColumns}
+              value={this.filterForm}
+              onChange={this.handleHeaderFilterChange}
+              onFilter={(e) => this.handleHeaderFilter(e)}
+              onReset={() => this.handleHeaderFilterReset(filterColumns)}
+            />
+          ) : null}
+        </span>
       );
     }
   }