diff --git a/packages/vtable-plugins/demo/filter/filter.ts b/packages/vtable-plugins/demo/filter/filter.ts index 7998f421a..66160a6ce 100644 --- a/packages/vtable-plugins/demo/filter/filter.ts +++ b/packages/vtable-plugins/demo/filter/filter.ts @@ -439,13 +439,26 @@ export function createTable() { // }, 2000); // 插件更新 - // setTimeout(() => { - // console.log('update'); - // tableInstance.updateOption({ - // ...option, - // plugins: [filterPlugin] - // }); - // }, 8000); + setTimeout(() => { + console.log('update'); + // tableInstance.updateOption({ + // ...option, + // plugins: [filterPlugin] + // }); + filterPlugin.updatePluginOptions({ + ...getTableFilterPluginAttrFromProps(), + filterIcon: { + name: 'filter-icon', + type: 'svg', + width: 120, + height: 120, + positionType: VTable.TYPES.IconPosition.right, + cursor: 'pointer', + marginRight: 4, + svg: `` + } + }); + }, 5000); // 实例释放 // setTimeout(() => { @@ -464,4 +477,20 @@ export function createTable() { args[0].event.preventDefault(); console.log('icon_click'); }); + + const HEADER_FILTER_HIGHLIGHT = 'header_filter_highlight'; + const HEADER_FILTER_DEFAULT = 'header_filter_default'; + tableInstance.registerCustomCellStyle(HEADER_FILTER_HIGHLIGHT, { + bgColor: 'red' + }); + tableInstance.registerCustomCellStyle(HEADER_FILTER_DEFAULT, { + bgColor: 'blue' + }); + + tableInstance.on('filter_menu_show', ({ col, row }) => { + tableInstance.arrangeCustomCellStyle({ col, row }, HEADER_FILTER_HIGHLIGHT); + }); + tableInstance.on('filter_menu_hide', ({ col, row }) => { + tableInstance.arrangeCustomCellStyle({ col, row }, HEADER_FILTER_DEFAULT); + }); } diff --git a/packages/vtable-plugins/src/filter/filter.ts b/packages/vtable-plugins/src/filter/filter.ts index 2d88c0808..2f452e002 100644 --- a/packages/vtable-plugins/src/filter/filter.ts +++ b/packages/vtable-plugins/src/filter/filter.ts @@ -153,6 +153,10 @@ export class FilterPlugin implements pluginsDefinition.IVTablePlugin { this.pluginOptions = merge(this.pluginOptions, pluginOptions); // 更新筛选器UI样式 this.filterToolbar.updateStyles(this.pluginOptions.styles); + // 更新icon + (this.table as ListTable).updateColumns(this.columns, { + clearRowHeightCache: false + }); } // 当用户的配置项更新时调用