From 034fb204bcc38f3a5b1fa6d22dae6d11b11fb79c Mon Sep 17 00:00:00 2001
From: xiaoming <1923740402@qq.com>
Date: Sun, 7 Jan 2024 13:30:10 +0800
Subject: [PATCH] feat(components): [table] add `filterClassName` props in
 TableColumn (#15389)

---
 packages/components/table/src/filter-panel.vue           | 9 ++++++++-
 packages/components/table/src/table-column/defaults.ts   | 2 ++
 packages/components/table/src/table-column/index.ts      | 2 ++
 .../components/table/src/table-column/watcher-helper.ts  | 1 +
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/components/table/src/filter-panel.vue b/packages/components/table/src/filter-panel.vue
index 3f3e763129..d9eb28def2 100644
--- a/packages/components/table/src/filter-panel.vue
+++ b/packages/components/table/src/filter-panel.vue
@@ -9,7 +9,7 @@
     teleported
     effect="light"
     pure
-    :popper-class="ns.b()"
+    :popper-class="filterClassName"
     persistent
   >
     <template #content>
@@ -145,6 +145,12 @@ export default defineComponent({
     const filters = computed(() => {
       return props.column && props.column.filters
     })
+    const filterClassName = computed(() => {
+      if (props.column.filterClassName) {
+        return `${ns.b()} ${props.column.filterClassName}`
+      }
+      return ns.b()
+    })
     const filterValue = computed({
       get: () => (props.column?.filteredValue || [])[0],
       set: (value: string) => {
@@ -234,6 +240,7 @@ export default defineComponent({
     return {
       tooltipVisible,
       multiple,
+      filterClassName,
       filteredValue,
       filterValue,
       filters,
diff --git a/packages/components/table/src/table-column/defaults.ts b/packages/components/table/src/table-column/defaults.ts
index 443cb35282..0b73f8ab32 100644
--- a/packages/components/table/src/table-column/defaults.ts
+++ b/packages/components/table/src/table-column/defaults.ts
@@ -49,6 +49,7 @@ interface TableColumnCtx<T> {
   filters: Filters
   filterPlacement: string
   filterMultiple: boolean
+  filterClassName: string
   index: number | ((index: number) => number)
   sortOrders: ('ascending' | 'descending' | null)[]
   renderCell: (data: any) => void
@@ -133,6 +134,7 @@ export default {
     type: Boolean,
     default: true,
   },
+  filterClassName: String,
   index: [Number, Function] as PropType<TableColumnCtx<DefaultRow>['index']>,
   sortOrders: {
     type: Array as PropType<TableColumnCtx<DefaultRow>['sortOrders']>,
diff --git a/packages/components/table/src/table-column/index.ts b/packages/components/table/src/table-column/index.ts
index ae77f36a57..3dba4dbfe5 100644
--- a/packages/components/table/src/table-column/index.ts
+++ b/packages/components/table/src/table-column/index.ts
@@ -82,6 +82,7 @@ export default defineComponent({
         filterable: props.filters || props.filterMethod,
         filteredValue: [],
         filterPlacement: '',
+        filterClassName: '',
         isColumnGroup: false,
         isSubColumn: false,
         filterOpened: false,
@@ -113,6 +114,7 @@ export default defineComponent({
         'filterOpened',
         'filteredValue',
         'filterPlacement',
+        'filterClassName',
       ]
 
       let column = getPropsData(basicProps, sortProps, selectProps, filterProps)
diff --git a/packages/components/table/src/table-column/watcher-helper.ts b/packages/components/table/src/table-column/watcher-helper.ts
index 934f8f0984..7fa164e030 100644
--- a/packages/components/table/src/table-column/watcher-helper.ts
+++ b/packages/components/table/src/table-column/watcher-helper.ts
@@ -57,6 +57,7 @@ function useWatcher<T>(
       'formatter',
       'className',
       'labelClassName',
+      'filterClassName',
       'showOverflowTooltip',
     ]
     const aliases = {