使用VUE组件创建SpreadJS自定义单元格（二）
时间：2023-03-28 19:05:12
HTML
在上一篇文章中，我们介绍了如何在Vue中通过设置runtimeCompiler为true来动态创建电子表格组件。想了解具体内容请点击查看使用VUE组件创建SpreadJS自定义单元格（一）。但在实际场景中，我们可能只需要动态创建VUE组件，不需要动态加载组件的模板内容。面对这种情况，autoComplete是一个典型的使用场景。autoComplete允许我们自由地将任何接收到的输入内容转换为包含标签\、\和contenteditable属性的元素。完成击键后，插件会搜索匹配的条目并显示可供选择的值列表。通过输入更多字符，用户可以过滤列表以获得更好的匹配。在前端电子表格中，我们可以直接用它来进行选择，比如为文章输入标签，或者在通讯录中输入邮箱地址。;自动完成也可用于填写相关信息，例如输入城市名称和获取邮政编码。但是现在如果我们想在纯前端表中实现这个功能，我们可以将动态创建的Component固化，按需导入然后挂载。这简化了我们在上一篇文章中提到的，我们需要启用runtimeCompiler来实现它。下面给大家介绍一下具体的方法：封装AutoComplete组件封装的组件{{item.phone}}
需要注意的几点：组件为相应的单元格提供文本（或值）属性需要编辑的值。如果组件不使用模型的双向绑定，则需要在运行后主动更新文本。提供cellStyle，用户CellType，根据cell大小控制组件的大小。如果注入的DOM元素不在模板div里面，需要添加gcUIEelement属性，原因在之前的文章2中有详细解释。autoComplete直接挂载组件，不需要额外的动态声明。从'../components/AutoComplete'AutoComplateCellType.prototype.activateEditor=function(editorContext,cellStyle,cellRect,context)导入AutoComplete{letwidth=cellRect.width>180?cellRect.width:180;if(editorContext){//创建组件构造函数constAutoCompleteCtor=Vue.extend(AutoComplete);this.vm=newAutoCompleteCtor({propsData:{cellStyle:{width:width+"px"}}}).$mount(editorContext.firstChild);}};其余代码不变，这样不仅不需要runtimeCompiler，而且代码的可维护性也提高了。本系列两篇文章为大家详细介绍了使用两种不同的方法来解决由于框架生命周期和自定义cell渲染逻辑，目前无法直接在框架页面下使用框架下组件的问题模板方法。但是我们使用Vue成功解决了这个问题，并通过第二种方式进行了优化，有效提高了代码的可维护性。未来，我们还会从其他角度为大家带来更多有趣的内容~如果你对纯前端电子表格SpreadJS的其他强大功能感兴趣，可以实际体验一下。
