VisActor · Rui-Sun · Jun 4, 2024 · May 31, 2024 · May 31, 2024
diff --git a/docs/assets/api/en/methods.md b/docs/assets/api/en/methods.md
@@ -1010,12 +1010,12 @@ Custom cell style
 - customStyleId: the unique id of the custom style
 - customStyle: Custom cell style, which is the same as the `style` configuration in `column`. The final rendering effect is the fusion of the original style of the cell and the custom style.
 
-## registerCustomCellStyleArrangement(Function)
+## arrangeCustomCellStyle(Function)
 
 Assign custom styles
 
 ```
-registerCustomCellStyleArrangement: (cellPosition: { col?: number; row?: number; range?: CellRange }, customStyleId: string) => void
+arrangeCustomCellStyle: (cellPosition: { col?: number; row?: number; range?: CellRange }, customStyleId: string) => void
 ```
 
 - cellPosition: cell position information, supports configuration of single cells and cell areas

diff --git a/docs/assets/api/zh/methods.md b/docs/assets/api/zh/methods.md
@@ -1008,12 +1008,12 @@ registerCustomCellStyle: (customStyleId: string, customStyle: ColumnStyleOption
 - customStyleId: 自定义样式的唯一 id
 - customStyle: 自定义单元格样式，与`column`中的`style`配置相同，最终呈现效果是单元格原有样式与自定义样式融合
 
-## registerCustomCellStyleArrangement(Function)
+## arrangeCustomCellStyle(Function)
 
 分配自定义样式
 
 ```
-registerCustomCellStyleArrangement: (cellPosition: { col?: number; row?: number; range?: CellRange }, customStyleId: string) => void
+arrangeCustomCellStyle: (cellPosition: { col?: number; row?: number; range?: CellRange }, customStyleId: string) => void
 ```
 
 - cellPosition: 单元格位置信息，支持配置单个单元格与单元格区域

diff --git a/docs/assets/guide/en/custom_define/custom_style.md b/docs/assets/guide/en/custom_define/custom_style.md
@@ -40,8 +40,8 @@ instance.registerCustomCellStyle(id, style)
 To use a registered custom style, you need to assign the custom style to the cell. The assignment needs to define two attributes: `cellPosition` and `customStyleId`:
 
 * cellPosition: cell position information, supports configuration of single cells and cell areas
-   * Single cell: `{ row: number, column: number }`
-   * Cell range: `{ range: { start: { row: number, column: number }, end: { row: number, column: number} } }`
+   * Single cell: `{ row: number, col: number }`
+   * Cell range: `{ range: { start: { row: number, col: number }, end: { row: number, col: number} } }`
 * customStyleId: Custom style id, the same as the id defined when registering the custom style
 
 There are two allocation methods, configuration in `option` and configuration using API:

diff --git a/docs/assets/guide/zh/custom_define/custom_style.md b/docs/assets/guide/zh/custom_define/custom_style.md
@@ -40,8 +40,8 @@ instance.registerCustomCellStyle(id, style)
 使用已注册的自定义样式，需要将自定义样式分配到单元格中，分配需要定义`cellPosition`和`customStyleId`两个属性：
 
 * cellPosition: 单元格位置信息，支持配置单个单元格与单元格区域
-  * 单个单元格：`{ row: number, column: number }`
-  * 单元格区域：`{ range: { start: { row: number, column: number }, end: { row: number, column: number} } }`
+  * 单个单元格：`{ row: number, col: number }`
+  * 单元格区域：`{ range: { start: { row: number, col: number }, end: { row: number, col: number} } }`
 * customStyleId: 自定义样式id，与注册自定义样式时定义的id相同
 
 分配方式有两种，`option`中配置和使用API配置：

diff --git a/packages/vtable-search/demo/list/list.ts b/packages/vtable-search/demo/list/list.ts
@@ -113,4 +113,8 @@ export function createTable() {
   //   );
   //   return false; //return false代表不执行内部排序逻辑
   // });
+
+  setTimeout(() => {
+    tableInstance.updateOption(option);
+  }, 2000);
 }
diff --git a/packages/vtable-search/demo/vite.config.js b/packages/vtable-search/demo/vite.config.js
@@ -14,7 +14,8 @@ module.exports = {
   resolve: {
     alias: {
       '@visactor/vtable': path.resolve(__dirname, '../../vtable/src/index.ts'),
-      '@src': path.resolve(__dirname, '../../vtable/src/')
+      '@src': path.resolve(__dirname, '../../vtable/src/'),
+      '@vutils-extension': path.resolve(__dirname, '../../vtable/src/vutil-extension-temp')
     }
   },
   plugins: [

diff --git a/packages/vtable-search/src/search-component/search-component.ts b/packages/vtable-search/src/search-component/search-component.ts
@@ -116,6 +116,12 @@ export class SearchComponent {
     if (!this.queryResult) {
       return;
     }
+    if (!this.table.hasCustomCellStyle('__search_component_highlight')) {
+      this.table.registerCustomCellStyle('__search_component_highlight', this.highlightCellStyle as any);
+    }
+    if (!this.table.hasCustomCellStyle('__search_component_focuse')) {
+      this.table.registerCustomCellStyle('__search_component_focuse', this.focuseHighlightCellStyle as any);
+    }
     for (let i = 0; i < this.queryResult.length; i++) {
       const { col, row } = this.queryResult[i];
       this.table.arrangeCustomCellStyle(

diff --git a/packages/vtable/examples/list/list.ts b/packages/vtable/examples/list/list.ts
@@ -16,7 +16,7 @@ const generatePersons = count => {
 };
 
 export function createTable() {
-  const records = generatePersons(1000000);
+  const records = generatePersons(2000);
   const columns: VTable.ColumnsDefine = [
     {
       field: '',
@@ -169,7 +169,18 @@ export function createTable() {
     container: document.getElementById(CONTAINER_ID),
     emptyTip: true,
     records,
-    columns,
+    columns: [
+      ...columns,
+      ...columns,
+      ...columns,
+      ...columns,
+      ...columns,
+      ...columns,
+      ...columns,
+      ...columns,
+      ...columns,
+      ...columns
+    ],
     tooltip: {
       isShowOverflowTextTooltip: true
     },

diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts
@@ -4368,6 +4368,9 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
   changeRecordOrder(source: number, target: number) {
     //
   }
+  hasCustomCellStyle(customStyleId: string): boolean {
+    return this.customCellStylePlugin.hasCustomCellStyle(customStyleId);
+  }
   registerCustomCellStyle(customStyleId: string, customStyle: ColumnStyleOption | undefined | null) {
     this.customCellStylePlugin.registerCustomCellStyle(customStyleId, customStyle);
   }

diff --git a/packages/vtable/src/plugins/custom-cell-style.ts b/packages/vtable/src/plugins/custom-cell-style.ts
@@ -27,7 +27,7 @@ export class CustomCellStylePlugin {
     const customStyleId = this.getCustomCellStyleId(col, row);
     if (customStyleId) {
       const styleOption = this.getCustomCellStyleOption(customStyleId);
-      return styleOption.style;
+      return styleOption?.style;
     }
     return undefined;
   }
@@ -133,13 +133,19 @@ export class CustomCellStylePlugin {
   }
 
   updateCustomCell(customCellStyle: CustomCellStyle[], customCellStyleArrangement: CustomCellStyleArrangement[]) {
+    this.customCellStyle.length = 0;
+    this.customCellStyleArrangement.length = 0;
     customCellStyle.forEach((cellStyle: CustomCellStyle) => {
       this.registerCustomCellStyle(cellStyle.id, cellStyle.style);
     });
     customCellStyleArrangement.forEach((cellStyle: CustomCellStyleArrangement) => {
       this.arrangeCustomCellStyle(cellStyle.cellPosition, cellStyle.customStyleId);
     });
   }
+
+  hasCustomCellStyle(customStyleId: string) {
+    return this.customCellStyle.some(style => style.id === customStyleId);
+  }
 }
 
 export function mergeStyle(cacheStyle: Style, customCellStyle: ColumnStyleOption): Style {