使用VUE组件创建SpreadJS自定义单元格(二)

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

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

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

在前端电子表格中，我们可以直接用它对内容进行选择，例如输入文章的标签或输入地址簿中的电子邮件地址。；自动完成功能还可用于填充相关信息，例如输入城市名称和获取邮政编码。而现在想在纯前端表格中实现这一功能，我们就可以将动态创建的Component固化，按需import 然后挂载即可。

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

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

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

其余代码不变，这样不仅不需要runtimeCompiler，代码可维护行也提高了。

这系列两篇文章详细为大家介绍使用两种不同的方式，解决由于框架生命周期以及自定义单元格渲染逻辑的问题，目前无法直接在框架页面下直接通过template的方式使用框架下的组件的问题。而我们使用Vue顺利解决了这个问题，并在第二种方式中进行了优化，有效提高代码的易维护性。

后续我们也会从其他角度，为大家带来更有有趣的内容~如果你对纯前端电子表格SpreadJS其他强大功能感兴趣，可以实际来体验一下。

使用VUE组件创建SpreadJS自定义单元格(二)相关推荐

使用VUE组件创建SpreadJS自定义单元格(一)
作为近五年都冲在热门框架排行榜首的Vue,大家一定会学到的一部分就是组件的使用.前端开发的模块化,可以让代码逻辑更加简单清晰,项目的扩展性大大加强.对于Vue而言,模块化的体现集中在组件之上,以组件为 ...
Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染) - 个人使用总结
前言 element-plus@2.2.0 后提供虚拟化表格组件,解决表格数据过大导致的卡顿等性能问题.相对于表格组件,用法上区别还是挺大的,尤其是一些附加的功能,例如排序.筛选.自定义单元格/表头渲 ...
【UIKit】表格自定义单元格（UITableViewCll）
自定义表格单元格(Cell)操作使用NIb文件自定义单元格(Cell) 1. 创建UITableViewCell的子类,创建的同时记得选择生成xib文件(当然你也可以将控件通过代码 ...
iOS开发那些事--自定义单元格实现
自定义单元格当苹果公司提供给的单元格样式不能我们的业务需求的时候,我们需要自定义单元格.在iOS 5之前,自定义单元格可以有两种实现方式:代码实现和用xib技术实现.用xib技术实现相对比较简单,创 ...
POI如何自定义单元格背景颜色
提出问题 POI如何自定义单元格背景颜色??? 解决问题例一:具体的看注释 import org.apache.poi.hssf.usermodel.*; import org.apache.poi ...
《Ext详解与实践》节选:自定义单元格的显示格式
有时候,需要在Grid中显示一个链接,或根据数字的大小显示不同的颜色,又或者使用固定格式显示记录编号等,这就需要自定义单元格的显示格式.在Ext的Grid可以很容易的实现自定义单元格的显示格式.在定义 ...
Swift - 自定义单元格实现微信聊天界面
1,下面是一个放微信聊天界面的消息展示列表,实现的功能有: (1)消息可以是文本消息也可以是图片消息 (2)消息背景为气泡状图片,同时消息气泡可根据内容自适应大小 (3)每条消息旁边有头像,在左边表示 ...
excel格式设置：自定义单元格让数据大变身
"自定义单元格格式"允许用户创建一些特殊规则的格式,用于强调显示某些重要数据或信息.设置显示条件等.我相信大多数人都用过单元格格式设置,按快捷键ctrl+1就可以调出如下所示对话框 ...
POI自定义单元格类
POI自定义单元格类在用POI做Excel导出的时候,单元格的创建是一个很头疼的问题,对于有些表格中杂乱无章的单元格顺序,比如: 这种树形结构并不像横向的表格有规律,所以就需要一行一行的插入.这是一 ...

使用VUE组件创建SpreadJS自定义单元格(二)

使用VUE组件创建SpreadJS自定义单元格(二)相关推荐

最新文章

热门文章