在上篇中，咱们介绍了如何通过设置runtimeCompiler为true，在Vue中实现了动态创建电子表格组件。想理解具体内容可看点击查看应用VUE组件创立SpreadJS自定义单元格(一)。

然而在理论场景中，咱们可能只须要动态创建VUE组件，而组件的template内容并不需要动静加载。面对这种状况， autoComplete就是一个很典型应用场景。

autoComplete能够让咱们自在将任何承受接管到的输出内容转化成含有标签\<input\>、\<textarea\>和带有contenteditable属性的元素。在实现键盘输入时，插件开始搜寻匹配的条目并显示可供选择的值列表。通过输出更多字符，用户能够过滤列表以更好地匹配。

在前端电子表格中，咱们能够间接用它对内容进行抉择，例如输出文章的标签或输出地址簿中的电子邮件地址。；主动实现性能还可用于填充相干信息，例如输出城市名称和获取邮政编码。而当初想在纯前端表格中实现这一性能，咱们就能够将动态创建的Component固化，按需import 而后挂载即可。

这样就简化了咱们在上篇中提到的，须要开启runtimeCompiler来实现了。

接下来为大家介绍具体做法：

  1. 封装AutoComplete组件封装的组件
  <div>    <el-autocomplete      :style="cellStyle"      popper-class="my-autocomplete"      v-model="text"      :fetch-suggestions="querySearch"      placeholder="请输出内容"      :popper-append-to-body="false"      value-key="name"      @select="handleSelect"    >      <i        class="el-icon-edit el-input__icon"        slot="suffix"        @click="handleIconClick"      >      </i>      <template slot-scope="{ item }">        <div class="name">{{ item.name }}</div>        <span class="addr">{{ item.phone }}</span>      </template>    </el-autocomplete>  </div></template>  <script>import DataService from '../static/dataService'export default {    props: ['text','cellStyle'],    mounted() {        this.items = DataService.getEmployeesData();    },    methods: {        querySearch(queryString, cb) {            var items = this.items;            var results = queryString ? items.filter(this.createFilter(queryString)) : items;            // 无奈设置动静内容的地位，能够动静增加gcUIElement            // setTimeout(() => {            //   let popDiv = document.getElementsByClassName("my-autocomplete")[0];            //   if(popDiv){            //     popDiv.setAttribute("gcUIElement", "gcEditingInput");            //   }            // }, 500);            // 调用 callback 返回倡议列表的数据            cb(results);        },        createFilter(queryString) {            return (restaurant) => {            return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);            };        },        handleSelect(item) {            console.log(item);        },        handleIconClick(ev) {            console.log(ev);        }    }}</script>

须要留神一下几点

  • 组件提供text(或者value）属性，用于对应单元格须要编辑的值，组件中如果不是用model双向绑定，操作后须要被动更新text
  • 提供cellStyle，用户CellType，依据单元格大小管制组件的大小
  • 组件如果有注入的DOM元素不在template div外部，须要增加gcUIElement属性，起因在上一篇有具体阐明

2、autoComplete间接挂载组件，不再须要额定动静申明

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 constructor       const AutoCompleteCtor = Vue.extend(AutoComplete);        this.vm = new AutoCompleteCtor({        propsData: {          cellStyle: {width: width+"px"}        }      }).$mount(editorContext.firstChild);    }};

其余代码不变，这样不仅不须要runtimeCompiler，代码可保护行也进步了。

这系列两篇文章具体为大家介绍应用两种不同的形式，解决因为框架生命周期以及自定义单元格渲染逻辑的问题，目前无奈间接在框架页面下间接通过template的形式应用框架下的组件的问题。而咱们应用Vue顺利解决了这个问题，并在第二种形式中进行了优化，无效进步代码的易维护性。

后续咱们也会从其余角度，为大家带来更有乏味的内容~如果你对纯前端电子表格SpreadJS其余弱小性能感兴趣，能够理论来体验一下。