关于前端:使用VUE组件创建SpreadJS自定义单元格二

在上篇中，咱们介绍了如何通过设置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其余弱小性能感兴趣，能够理论来体验一下。