diff --git a/lib/ui/grid/grid.js b/lib/ui/grid/grid.js index 0e736d6..c4ef3b5 100644 --- a/lib/ui/grid/grid.js +++ b/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(); });