在上篇中，我们介绍了如何通过设置runtimeCompiler为true，在Vue中实现动态创建电子表格组件 。想了解具体内容可点击查看使用VUE组件创建SpreadJS自定义单元格(一) 。
但是在实际场景中，我们可能只需要动态创建VUE组件，而组件的template内容并不需要动态加载 。面对这种情况，autoComplete就是一个很典型使用场景 。
autoComplete可以让我们自由将任何接收到的输入内容转化成含有标签、和带有contenteditable属性的元素 。在完成键盘输入时，插件开始搜索匹配的条目并显示可供选择的值列表 。通过输入更多字符，用户可以过滤列表以更好地匹配 。
在前端电子表格中，我们可以直接用它对内容进行选择 ， 例如输入文章的标签或输入地址簿中的电子邮件地址；自动完成功能还可用于填充相关信息，例如输入城市名称和获取邮政编码 。而现在想在纯前端表格中实现这一功能，我们就可以将动态创建的Component固化 ， 按需import 然后挂载即可 。
这样就简化了我们在上篇中提到的，需要开启runtimeCompiler来实现了 。
接下来为大家介绍具体做法：
1. 封装AutoComplete组件封装的组件，
- 组件提供text(或者value）属性，用于对应单元格需要编辑的值，组件中如果不是用model双向绑定 ， 操作后需要主动更新text
- 提供cellStyle，用户CellType，根据单元格大小控制组件的大小
- 组件如果有注入的DOM元素不在template div内部，需要添加gcUIElement属性，原因在上一篇有详细说明
import AutoComplete from '../components/AutoComplete'AutoComplateCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {let width = cellRect.width > 180 ? cellRect.width : 180;if (editorContext) {// create component constructorconst AutoCompleteCtor = Vue.extend(AutoComplete);this.vm = new AutoCompleteCtor({propsData: {cellStyle: {width: width "px"}}}).$mount(editorContext.firstChild);}};其余代码不变，这样不仅不需要runtimeCompiler，代码可维护行也提高了 。
这系列两篇文章详细为大家介绍使用两种不同的方式，解决由于框架生命周期以及自定义单元格渲染逻辑的问题，目前无法在框架页面下直接通过template的方式使用框架下组件的问题 。而我们使用Vue顺利解决了这个问题，并在第二种方式中进行了优化，有效提高代码的易维护性 。
后续我们也会从其他角度，为大家带来更有有趣的内容~如果你对纯前端电子表格SpreadJS其他强大功能感兴趣 ， 可以实际来体验一下 。
