在VUE3中创建可编辑的SpreadJS自定义单元格

对于VUE 2 的用户可以参考使用VUE组件创建SpreadJS自定义单元格(二)来创建可编辑的自定义单元格，在VUE 3中原有的$mount弃用由app.mount代替，这是个比较大的breaking change，同时也有人在问是否可以使用h函数方便的创建自定义单元格。接下来我们就看一看如何在VUE3中创建可编辑的自定义单元格。

首先，采用传统mount方式，将VUE2的Demo升级到VUE3. 示例代码时不太严格的TypeScript，大家根据实际情况可以调整。
第一步，还是封装组件
这里使用了element-plus的ElDatePicker组件，组件中设置teleported为false，保证弹出的日期选择框是渲染在单元格的dom中而不是body里
如果使用的组件没有类似属性，出现了点击组件就退出编辑的问题，那就需要在组件生成后或者弹出后给组件添加gcUIElement

defineExpose 中暴露了方法给外部调用，这也是和VUE2的一个差异，VUE2中所有的属性和方法都可以随便调用。

1. <script setup lang="ts">
   
2. import { ref } from 'vue';
   
3. const datePicker = ref<any>(null);
   
4. const text = defineModel('text')
   
5. const cellStyle = ref(null);
   
6. 
   
7. const setFocus = function(){
   
8.   if(datePicker.value){
   
9.     datePicker.value.focus();
   
10.   }
    
11. }
    
12. 
    
13. const updateStyle = function(style: any){
    
14.   cellStyle.value = style;
    
15. }
    
16. 
    
17. defineExpose({
    
18.   text,
    
19.   updateStyle,
    
20.   setFocus
    
21. })
    
22. 
    
23. </script>
    
24. 
    
25. <template>
    
26.       <el-date-picker
    
27.         ref="datePicker"
    
28.         v-model="text"
    
29.         type="date"
    
30.         placeholder="选择日期"
    
31.         popper-class="spread-date-picker-popper"
    
32.         :teleported="false"
    
33.         :style="cellStyle"
    
34.       />
    
35. </template>
    
36. 
    
37. <style scoped>
    
38. 
    
39. </style>
    

复制代码

第二步，实现cellType，通过createApp 以及 实例的mount方法挂载组件
mount 的返回类型是ComponentPublicInstance，通过这个instance可以调用Expose的属性和方法，通过text设置日期、setFocus设置日期选择器自动获取焦点

1. import * as GC from "@grapecity/spread-sheets"
   
2. import DatePickerNew from './DatePickerNew.vue'
   
3. import { createApp } from 'vue'
   
4. import { ElDatePicker } from 'element-plus'
   
5. 
   
6. class datePickerEditorNew extends GC.Spread.Sheets.CellTypes.Base {
   
7. 
   
8.   private _app: any = null;
   
9.   private _vm: any = null;
   
10. 
    
11.   public typeName: string = 'datePickerEditorNew'
    
12.   public createEditorElement(_context: any): HTMLElement {
    
13.     console.log('编辑器创建')
    
14.     let editorContext = document.createElement("div")
    
15.     editorContext.setAttribute("gcUIElement", "gcEditingInput");
    
16.     let editor = document.createElement("div");
    
17.     editorContext.appendChild(editor);
    
18. return editorContext
    
19.   }
    
20. 
    
21.   public activateEditor(editorContext: HTMLElement, _cellStyle: any, _cellRect: any, _context?: any): void {
    
22. this._app = createApp(DatePickerNew, {});
    
23. this._app.use(ElDatePicker);
    
24. this._vm = this._app.mount(editorContext.firstChild as HTMLElement);
    
25.   }
    
26. 
    
27.   public updateEditor(editorContext: HTMLElement, _cellStyle: any, cellRect: any, _context?: any): any {
    
28.     console.log('编辑器更新')
    
29.     let width = cellRect.width > 180 ? cellRect.width : 180;
    
30.     this._vm.updateStyle({ width: width + "px" });
    
31.     const rect = new GC.Spread.Sheets.Rect(cellRect.x, cellRect.y, cellRect.width, cellRect.height);
    
32.     (editorContext as any).parentElement.parentElement.style.overflow = "visible"
    
33.     return rect;
    
34.   }
    
35. 
    
36.   public getEditorValue(_editorContext: HTMLElement, _context?: any): any {
    
37.     return this._vm.text;
    
38.   }
    
39. 
    
40.   public setEditorValue(_editorContext: HTMLElement, value: any, _context?: any): void {
    
41.     if (this._app) {
    
42.       this._vm.text = value;
    
43.     }
    
44.   }
    
45. 
    
46.   public deactivateEditor(_editorContext: HTMLElement, _context?: any): void {
    
47.     console.log('组件销毁')
    
48.     this._app.unmount();
    
49.     this._app = null;
    
50.     this._vm = null;
    
51.   }
    
52. 
    
53.   public isEditingValueChanged(oldValue: any, newValue: any, _context?: any): boolean {
    
54.     return oldValue !== newValue;
    
55.   }
    
56. 
    
57.   public focus(_editorContext: HTMLElement, _context?: any): void {
    
58.     this._vm.setFocus();
    
59.     console.log("CellType Focus")
    
60.   }
    
61. }
    
62. 
    
63. export { datePickerEditorNew }

复制代码

使用时和vue2没有区别

1. sheet.getCell(2, 1).value("2024/8/1").cellType(new datePickerEditorNew())

复制代码

效果如下：



以上是完整流程的创建，在SpreadJS单元格各个生命周期方法中也掉用VUE组件instance的属性和方法，总体上有些繁琐。
如果只是简单的封装可以使用h函数快速创建一个VNode进行挂载显示，更加灵活简单。

和上面的方法主要区别是在activateEditor中通过render和h函数在创建的dom上渲染vnode。
vnode的赋值和取值直接在这里操作_text完成，没有全局的app和vm。
销毁时也是通过render渲染null

1. import * as GC from "@grapecity/spread-sheets"
   
2. import { h, ref, render, nextTick, defineComponent} from 'vue'
   
3. 
   
4. import { ElDatePicker } from 'element-plus'
   
5. 
   
6. class datePickerEditorRender extends GC.Spread.Sheets.CellTypes.Base {
   
7. 
   
8.   private _text: any = "";
   
9. 
   
10.   public typeName: string = 'datePickerEditorRender'
    
11.   public createEditorElement(_context: any): HTMLElement {
    
12.     console.log('编辑器创建')
    
13.     let editorContext = document.createElement("div")
    
14.     editorContext.setAttribute("gcUIElement", "gcEditingInput");
    
15.     let editor = document.createElement("div");
    
16.     editorContext.appendChild(editor);
    
17.     return editorContext
    
18.   }
    
19. 
    
20.   public activateEditor(editorContext: HTMLElement, _cellStyle: any, cellRect: any, context?: any): void {
    
21.     if (editorContext) {
    
22.       const { row, col, sheet } = context
    
23.       const cell = sheet.getCell(row, col)
    
24.       const value = cell.value()
    
25. 
    
26.       let cellType = this;
    
27. 
    
28.       let width = cellRect.width > 180 ? cellRect.width : 180;
    
29.       const pickerCom = defineComponent({
    
30.         data() {
    
31.           return { text: value}
    
32.         },
    
33.         mounted() {
    
34.           nextTick(() => { this.setFocus() });
    
35.         },
    
36.         methods: {
    
37.           setFocus() {
    
38.             (this as any).datePicker.value.focus();
    
39.           }
    
40.         },
    
41.         render() {
    
42.           (this as any).datePicker = ref<any>(null);
    
43.           const vnode = h(ElDatePicker, {
    
44.             modelValue: this.text,
    
45.             "onUpdate:modelValue": (val: any) => {
    
46.               this.text = val;
    
47.               cellType._text = val
    
48.             },
    
49.             teleported: false,
    
50.             style: { width: width + "px" },
    
51.             ref: (this as any).datePicker
    
52.           });
    
53.           return vnode;
    
54.         },
    
55.         expose: ["text", "setFocus"]
    
56.       });
    
57. 
    
58.       const vNode = h(pickerCom);
    
59.       render(vNode, editorContext.firstChild as HTMLElement)
    
60.     }
    
61.   }
    
62. 
    
63.   public updateEditor(editorContext: HTMLElement, _cellStyle: any, cellRect: any, _context?: any): any {
    
64.     console.log('编辑器更新')
    
65.     const rect = new GC.Spread.Sheets.Rect(cellRect.x, cellRect.y, cellRect.width, cellRect.height);
    
66.     (editorContext as any).parentElement.parentElement.style.overflow = "visible"
    
67.     return rect;
    
68.   }
    
69. 
    
70.   public getEditorValue(_editorContext: HTMLElement, _context?: any): any {
    
71.     return this._text;
    
72.   }
    
73. 
    
74.   public setEditorValue(_editorContext: HTMLElement, value: any, _context?: any): void {
    
75.     this._text = value
    
76.   }
    
77. 
    
78.   public deactivateEditor(editorContext: HTMLElement, _context?: any): void {
    
79.     console.log('组件销毁')
    
80.     render(null, editorContext.firstChild as HTMLElement)
    
81.   }
    
82. 
    
83.   public isEditingValueChanged(oldValue: any, newValue: any, _context?: any): boolean {
    
84.     return oldValue !== newValue;
    
85.   }
    
86. 
    
87. }
    
88. 
    
89. export { datePickerEditorRender }

复制代码

使用CellType代码相同

1. 
   
2.     sheet.getCell(4, 1).value("2024/8/1").cellType(new datePickerEditorRender())

复制代码

使用render和h函数注入组件，不需要再写额外的组件，也不需要create新的vue实例。
但是由于vNode不返回组件实例，无法在celltype其他方法中调用组件内部方法，组件的focus只能自己延时完成。

以上便是在VUE3中创建可编辑自定义单元格的示例，有问题大家可以跟帖讨论。