From 14836f266d7d2c4d711da5b4a9d48810aec9f9b3 Mon Sep 17 00:00:00 2001
From: rainbowvs <527532711@qq.com>
Date: Thu, 9 May 2024 16:32:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20table=20filter=20=E8=A7=A6=E5=8F=91?=
 =?UTF-8?q?=E9=98=BB=E6=AD=A2=E5=86=92=E6=B3=A1,=20=E9=81=BF=E5=85=8D?=
 =?UTF-8?q?=E4=B8=8E=20sort=20=E5=90=8C=E6=97=B6=E8=A7=A6=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugin/components/table/header-filter.vue | 14 +++++++++--
 src/plugin/components/table/index.vue         | 24 ++++++++++---------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/plugin/components/table/header-filter.vue b/src/plugin/components/table/header-filter.vue
index 98cfb193..ee247653 100644
--- 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
index 8930e9ad..f126f354 100644
--- 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>
       );
     }
   }