使用VUE组件，创建前端表格自定义单元格(二)

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

但是在实际场景中，我们可能只需要动态创建VUE组件，而组件的template内容并不需要动态加载。面对这种情况，autoComplete就是一个很典型使用场景。

autoComplete可以让我们自由将任何接收到的输入内容转化成含有标签、和带有contenteditable属性的元素。在完成键盘输入时，插件开始搜索匹配的条目并显示可供选择的值列表。通过输入更多字符，用户可以过滤列表以更好地匹配。</p><p>在前端电子表格中，我们可以直接用它对内容进行选择，例如输入文章的标签或输入地址簿中的电子邮件地址；自动完成功能还可用于填充相关信息，例如输入城市名称和获取邮政编码。而现在想在纯前端表格中实现这一功能，我们就可以将动态创建的Component固化，按需import 然后挂载即可。</p><p>这样就简化了我们在上篇中提到的，需要开启runtimeCompiler来实现了。</p><p>接下来为大家介绍具体做法：</p><p><b>1. 封装AutoComplete组件封装的组件，<template></b></p><p><code> <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>{{ item.name }}</div> {{ item.phone }} </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></code></pre><p>需要注意一下几点</p><ul><li>组件提供text(或者value）属性，用于对应单元格需要编辑的值，组件中如果不是用model双向绑定，操作后需要主动更新text</li><li>提供cellStyle，用户CellType，根据单元格大小控制组件的大小</li><li>组件如果有注入的DOM元素不在template div内部，需要添加gcUIElement属性，原因在上一篇有详细说明</li></ul><p><b>2、autoComplete直接挂载组件，不再需要额外动态声明</b></p><p><code>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); } };</code></pre><p>其余代码不变，这样不仅不需要runtimeCompiler，代码可维护行也提高了。</p><div><img referrerpolicy="no-referrer" src="https://p26.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/e2cb728c7cf74c79a17d3a0037946db8"></div><p>这系列两篇文章详细为大家介绍使用两种不同的方式，解决由于框架生命周期以及自定义单元格渲染逻辑的问题，目前无法在框架页面下直接通过template的方式使用框架下组件的问题。而我们使用Vue顺利解决了这个问题，并在第二种方式中进行了优化，有效提高代码的易维护性。</p><p>后续我们也会从其他角度，为大家带来更有有趣的内容~如果你对纯前端电子表格SpreadJS其他强大功能感兴趣，可以实际来体验一下。</p><div><img referrerpolicy="no-referrer" src="https://p26.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/334ec3851c734aeb80761fac209cb925">