fix(table): resolve props.filterIcon not work (#4837)

* fix(table): props.filterIcon not work * chore: fix lint * chore: fix lint * chore: add test case
Tencent · Dec 14, 2024 · 47a7886 · 47a7886
1 parent c092cd5
commit 47a7886
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 1 deletion.
diff --git a/src/table/__tests__/base.test.jsx b/src/table/__tests__/base.test.jsx
@@ -561,5 +561,56 @@ TABLES.forEach((TTable) => {
         expect(wrapper.find('.t-table__top-content').text()).toBe(topContentText);
       });
     });
+
+    describe(':props.filterIcon', () => {
+      it('props.filterIcon could be function', async () => {
+        const filterIconText = () => '筛';
+        const filterColumns = SIMPLE_COLUMNS.map((item) => ({
+          ...item,
+          filter: { type: 'single', list: [{ label: 1, value: 2 }] },
+        }));
+
+        const wrapper = mount({
+          render() {
+            return <TTable filterIcon={filterIconText} rowKey="index" data={data} columns={filterColumns}></TTable>;
+          },
+        });
+
+        if (TTable.name == 'TBaseTable') {
+          expect(wrapper.find('.t-table__filter-icon').exists()).toBeFalsy();
+        } else {
+          expect(wrapper.find('.t-table__filter-icon').exists()).toBeTruthy();
+          expect(wrapper.find('.t-table__filter-icon').text()).toBe(filterIconText());
+        }
+      });
+
+      it('slots.filter-icon works fine', () => {
+        const filterIconText = (rowKey) => '筛' + rowKey;
+        const filterColumns = SIMPLE_COLUMNS.map((item) => ({
+          ...item,
+          filter: { type: 'single', list: [{ label: 1, value: 2 }] },
+        }));
+        const wrapper = mount({
+          render() {
+            return (
+              <TTable
+                v-slots={{ filterIcon: (col, colIndex) => filterIconText(col.col.colKey) }}
+                rowKey="index"
+                data={data}
+                columns={filterColumns}
+              ></TTable>
+            );
+          },
+        });
+        if (TTable.name == 'TBaseTable') {
+          expect(wrapper.find('.t-table__filter-icon').exists()).toBeFalsy();
+        } else {
+          expect(wrapper.find('.t-table__filter-icon').exists()).toBeTruthy();
+          SIMPLE_COLUMNS.forEach((item, index) => {
+            expect(wrapper.findAll('.t-table__filter-icon').at(index).text()).toBe(filterIconText(item.colKey));
+          });
+        }
+      });
+    });
   });
 });
diff --git a/src/table/filter-controller.tsx b/src/table/filter-controller.tsx
@@ -7,7 +7,7 @@ import { RadioGroup } from '../radio';
 import Input from '../input';
 import TButton from '../button';
 import { useTNodeDefault } from '../hooks/tnode';
-import { PrimaryTableCol, FilterValue } from './type';
+import { PrimaryTableCol, FilterValue, TdPrimaryTableProps } from './type';
 import { useConfig } from '../hooks/useConfig';
 import { useGlobalIcon } from '../hooks/useGlobalIcon';
 import { AttachNode } from '../common';
@@ -37,6 +37,7 @@ export interface TableFilterControllerProps {
   popupProps: PopupProps;
   attach?: AttachNode;
   onVisibleChange: (val: boolean) => void;
+  filterIcon?: TdPrimaryTableProps['filterIcon'];
 }
 
 export default defineComponent({
@@ -55,6 +56,7 @@ export default defineComponent({
     popupProps: Object as PropType<TableFilterControllerProps['popupProps']>,
     attach: [String, Function] as PropType<TableFilterControllerProps['attach']>,
     onVisibleChange: Function as PropType<TableFilterControllerProps['onVisibleChange']>,
+    filterIcon: [Function] as PropType<TableFilterControllerProps['filterIcon']>,
   },
 
   emits: ['inner-filter-change', 'reset', 'confirm'],