feature: supports different icons in unfiltered/filtered status.

lib/ui/grid/grid.js

@@ -806,12 +806,19 @@ export class Grid {
      */
     lineHeight = 24;
     /**
-     * 列头过滤图标，旧版本样式（横着三个点）需修改为 `ellipsis-h`
+     * 列头未过滤时的图标
+     * @type {string}
+     * @default "ellipsis-h"
+     * @ignore
+     */
+    filterIcon = 'ellipsis-h';
+    /**
+     * 列头已过滤时的图标
      * @type {string}
      * @default "filter"
      * @ignore
      */
-    filterIcon = 'filter';
+    filteredIcon = 'filter';
     /**
      * 列表底部留出额外的空白行
      * @type {number}
@@ -1009,7 +1016,8 @@ export class Grid {
      * @property {boolean} [autoResize=true] - 未设置宽度的列自动调整列宽
      * @property {number} [rowHeight=36] - 表格行高
      * @property {number} [lineHeight=24] - 文本行高（多行文本列计算高度时使用）
-     * @property {string} [filterIcon=filter] - 列头过滤图标，旧版本样式（横着三个点）需修改为 `"ellipsis-h"`
+     * @property {string} [filterIcon=ellipsis-h] - 列头未过滤时的图标
+     * @property {string} [filteredIcon=filter] - 列头已过滤时的图标
      * @property {number} [extraRows=0] - 列表底部留出额外的空白行
      * @property {number} [filterRowHeight=30] - 过滤条件列表的行高
      * @property {number} [height] - 列表高度值，为 0 时列表始终显示全部内容（自增高），为非数字或者小于 0 则根据容器高度来确定虚模式的渲染行数
@@ -1442,8 +1450,10 @@ export class Grid {
                     continue;
                 }
                 if (this.columns[i].filterValues != null) {
+                    ele.replaceChildren(createIcon('fa-solid', this.filteredIcon));
                     ele.classList.add('active');
                 } else {
+                    ele.replaceChildren(createIcon('fa-solid', this.filterIcon));
                     ele.classList.remove('active');
                 }
             }
@@ -1457,8 +1467,10 @@ export class Grid {
                     continue;
                 }
                 if (this.columns[i].filterValues != null) {
+                    ele.replaceChildren(createIcon('fa-solid', this.filteredIcon));
                     ele.classList.add('active');
                 } else {
+                    ele.replaceChildren(createIcon('fa-solid', this.filterIcon));
                     ele.classList.remove('active');
                 }
             }
@@ -3248,6 +3260,7 @@ export class Grid {
                     if (typeof col.onFiltered === 'function') {
                         col.onFiltered.call(this, col);
                     }
+                    filter.replaceChildren(createIcon('fa-solid', this.filteredIcon));
                     filter.classList.add('active');
                     this._onCloseFilter();
                 });
@@ -3261,6 +3274,7 @@ export class Grid {
                     if (typeof col.onFiltered === 'function') {
                         col.onFiltered.call(this, col);
                     }
+                    filter.replaceChildren(createIcon('fa-solid', this.filterIcon));
                     filter.classList.remove('active');
                     this._onCloseFilter();
                 });