feat(components): [table] add filterClassName props in TableColumn (#15389)

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,

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']>,

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)

packages/components/table/src/table-column/watcher-helper.ts

@@ -57,6 +57,7 @@ function useWatcher<T>(
       'formatter',
       'className',
       'labelClassName',
+      'filterClassName',
       'showOverflowTooltip',
     ]
     const aliases = {