使用VUE组件创建SpreadJS自定义cell（一）
时间：2023-03-28 15:53:10
HTML
作为Vue，在过去五年一直位居流行框架榜首，大家要学习的部分内容就是组件的使用。前端开发的模块化可以让代码逻辑更加简单清晰，项目的可扩展性大大增强。对于Vue来说，模块化的体现集中在组件上，以组件为单位实现模块化。通常，我们使用组件的方式是在实例化Vue对象之前通过Vue.component方法注册全局组件。//告诉Vue现在需要组件todo-item，配置如下，包括props和templateVue.component('todo-item',{props:['todo'],template:'
{{todo.text}}'})//实例化一个Vue对象，挂载在#app-7元素下，设置其属性，数组groceryListvarapp7=newVue({el:'#app-7',data:{groceryList:[{text:'Vegetables'},{text:'Cheese'},{text:'Whateverelsehumansaresupposedtoeat'}]}})在许多组件中，它是必要的电子表格office，在前端组件中也占有重要地位。电子表格除了以表格的形式展示数据外，还有一个很重要的功能，就是支持自定义功能扩展和自定义各种数据展示效果，比如checkbox、Radiobutton等；还需要实现单元格进入编辑状态时，使用下拉菜单（或其他输入控件）进入的效果。我们称其为“自定义单元格”，即嵌入在组件内部的组件。SpreadJS目前有8个下拉列表。在打开列表之前，我们只需要在单元格样式中设置选项数据即可。列表的使用可参考以下代码：在线体验地址//点击下拉图标打开列表的方式。varstyle=newGC.Spread.Sheets.Style();style.cellButtons=[{图像类型：GC.Spread。Sheets.ButtonImageType.dropdown，命令：“openList”，useButtonStyle：true，}]；style.dropDowns=[{type:GC.Spread.Sheets.DropDownType.list,option:{items:[{text:'item1',value:'item1'},{text:'item2',value:'item2'},{text:'item3',value:'item3'},{text:'item4',value:'item4'}],}}];sheet.setText(2,1,"竖排文本列表");sheet.setStyle(3,1,样式);//使用命令而不是单击下拉按钮打开列表的方式。spread.commandManager().execute({cmd:"openList",row:3,col:1,sheetName:"Sheet1"});前端电子表格使用方便，但是由于frame生命周期和自定义cell渲染逻辑的问题，目前的技术手段无法直接使用frame页面下的template直接在frame下的Components，在前面的内容中，我们提到可以使用Svelte来使用WebComponents来封装其他组件可以使用的组件。除了上面提到的方法，如果我们想在Vue环境中使用自定义cell，可以考虑使用动态渲染来创建和挂载组件，从而将组件注入到自定义cell中。下面演示如何在VUE项目中使用VUE组件创建自定义单元格。实践首先，在项目中开启运行时加载，在vue.config.js中添加runtimeCompiler:true。module.exports={devServer:{port:3000},
runtimeCompiler:true}引用ElementUI，需要注意把element的css引用放在APP导入之前，从而修改样式，覆盖原来的项目内容。从'vue'导入Vue从'element-ui'导入ElementUI;导入'element-ui/lib/theme-chalk/index.css';从'./App.vue'导入应用程序从'./router'导入路由器Vue.use(ElementUI);newVue({el:'#app',router,render:h=>h(App)})Vue.config.productionTip=false创建AutoComplateCellType，具体代码如下，需要要注意几点。1.对于自定义元素，需要添加gcUIElement属性。如果该元素或其父元素不具备该属性，则点击创建的组件将直接退出编辑状态，无法进行编辑。对于ElementUI的自动补全，默认的下拉选项内容注入到body中，需要在组件模板中设置：popper-append-to-body="false"，这样弹出的下拉选项才会被渲染在gcUIElement的Div中。如果使用其他组件时没有类似的选项，也可以根据实际情况，在弹出的时候添加gcUIElement属性。2、使用动态挂载组件的this.vm设置和获取cell的值。3.在deactivateEditor中销毁组件。importVuefrom'vue'import*asGCfrom"@grapecity/spread-sheets"importDataServicefrom'./dataService'functionAutoComplateCellType(){}AutoComplateCellType.prototype=newGC.Spread.Sheets.CellTypes.Base();AutoComplateCellType.prototype.createEditorElement=function(context,cellWrapperElement){cellWrapperElement.style.overflow='visible'让editorContext=document.createElement("div")editorContext.setAttribute("gcUIElement","gcEditingInput"itor=documented.createElement("div");//自定义cell中的editorContext作为容器，挂载需要创建child，不能直接挂载到editorContexteditorContext.appendChild(editor);returneditorContext;}AutoComplateCellType.prototype.activateEditor=function(editorContext,cellStyle,cellRect,context){letwidth=cellRect.width>180?cellRect.width:180;if(editorContext){//动态创建一个VUE组件并挂载到编辑器constAutoCompleteComponent={props:['text','cellStyle'],template:`{{item.phone}} `,mounted(){this.items=DataService.getEmployeesData();},方法:{querySearch(queryString,cb){varitems=this.items;变种结果=查询字符串？items.filter(this.createFilter(queryString))：项目；//动态内容的位置不能设置，可以动态添加gcUIElement//setTimeout(()=>{//letpopDiv=document.getElementsByClassName("my-autocomplete")[0];//if(popDiv){//popDiv.setAttribute("gcUIElement","gcEditingInput");//}//},500);//调用回调返回建议列表的数据cb(results);},createFilter(queryString){return(restaurant)=>{return(restaurant.name.toLowerCase().indexOf(queryString.toLowe)rCase())===0);};},handleSelect(item){console.log(item);},handleIconClick(ev){console.log(ev);}}};//创建组件构造函数constAutoCompleteCtor=Vue.extend(AutoCompleteComponent);this.vm=newAutoCompleteCtor({propsData:{cellStyle:{width:width+"px"}}}).$mount(editorContext.firstChild);}returneditorContext;};AutoComplateCellType.prototype.updateEditor=function(editorContext,cellStyle,cellRect){//给一个最小编辑区域很大letwidth=cellRect.width>180?cellRect.width:180;让height=cellRect.height>40？cellRect.height:40;return{width:width,height:height};};AutoComplateCellType.prototype.getEditorValue=function(editorContext){//设置组件默认值if(this.vm){returnthis.vm.text;}};AutoComplateCellType.prototype.setEditorValue=function(editorContext,value){//获取组件的编辑值if(editorContext){this.vm.text=value;}};AutoComplateCellType.prototype.deactivateEditor=function(editorContext,context){//销毁组件this.vm.$destroy();this.vm=undefined;};export{AutoComplateCellType};效果如图：一个完美的cell新鲜出炉~这里介绍的方法只是几种实现如果你有其他更好的想法欢迎一起讨论~如果你对其他前端更多有趣的功能感兴趣电子表格，您可以查看更多SpreadJS示例。以后我们会继续为大家带来更严肃有趣的内容~
