共计 5142 个字符，预计需要花费 13 分钟才能阅读完成。
作为近五年都冲在热门框架排行榜首的 Vue，大家肯定会学到的一部分就是组件的应用。前端开发的模块化，能够让代码逻辑更加简略清晰，我的项目的扩展性大大增强。对于 Vue 而言，模块化的体现集中在组件之上，以组件为单位实现模块化。
通常咱们应用组件的形式是，在实例化 Vue 对象之前，通过 Vue.component 办法来注册全局的组件。
// 通知 Vue，当初须要组件 todo-item，配置如下，蕴含 props 和 template
Vue.component('todo-item', {props: ['todo'],
template: '<li>{{todo.text}}</li>'
})
// 实例化一个 Vue 对象，挂载在 #app- 7 元素下，定它的属性，数组 groceryList
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [{ text: 'Vegetables'},
{text: 'Cheese'},
{text: 'Whatever else humans are supposed to eat'}
]
}
})
在泛滥组件之中，作为办公必备的电子表格，在前端组件中也占据了重要位置。除了以表格的模式展现数据，电子表格还有一个十分重要的性能，即反对自定义性能拓展和各种定制化的数据展现成果，比方 checkbox，Radio button 等；还须要实现当单元格进入编辑状态时，应用下拉菜单（或其余输出控件）输出的成果。咱们称之为 ” 自定义单元格 ”，一种嵌入组件内的组件。SpreadJS 目前领有 8 种下拉列表，在关上列表之前，咱们只须要在单元格款式中设置选项数据。你能够参考以下代码应用列表：
在线体验地址
// The way of click the dropdown icon to open list.
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "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, "Vertical text list");
sheet.setStyle(3, 1, style);
// The way open list with command rather then clicking the dropdown button.
spread.commandManager().execute({cmd:"openList",row:3,col:1,sheetName:"Sheet1"});
前端电子表格诚然好用，但因为框架生命周期以及自定义单元格渲染逻辑的问题，目前的技术手段无奈间接在框架页面下间接通过 template 的形式应用框架下的组件。在之前的内容中，咱们提到了能够应用 Svelte 应用 Web Conmponents 封装其余组件能够应用的组件。
除了下面提到的办法之外，咱们如果想在 Vue 环境下应用自定义单元格，能够思考应用持动静渲染的形式来创立和挂载组件，从而将组件注入自定义单元格。
上面为大家演演示如何在 VUE 我的项目中，创立一个应用 VUE 组件的自定义单元格。
实际
首先，在我的项目中开启运行时加载，在 vue.config.js 中增加 runtimeCompiler: true。
module.exports = {
devServer: {port: 3000},
<font color="#ff0000">runtimeCompiler: true</font>
}
援用 ElementUI，须要留神要把 element 的 css 援用放在 APP import 前，这样批改款式，能力笼罩原有我的项目内容。
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
Vue.use(ElementUI);
new Vue({
el: '#app',
router,
render: h => h(App)
})
Vue.config.productionTip = false
创立 AutoComplateCellType，具体代码如下，须要留神几点。
1、自定义的元素，须要增加 gcUIElement 属性，如果元素或者其父元素没有该属性，点击创立的组件便会间接退出编辑状态无奈编辑。
对于 ElementUI 的 autocomplete，默认下拉选项内容是注入到 body 中的，须要给组件模板中设置:popper-append-to-body=”false”，让弹出的下拉选项在 gcUIElement 的 Div 中渲染。
如果应用其余组件没有相似选项，也能够跟进理论状况在弹出时在增加 gcUIElement 属性。
2、应用动静挂载组件的 this.vm 设置和获取单元格的值。
3、在 deactivateEditor 中销毁组件。
import Vue from 'vue'
import * as GC from "@grapecity/spread-sheets"
import DataService from './dataService'
function AutoComplateCellType() {}
AutoComplateCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
AutoComplateCellType.prototype.createEditorElement = function (context, cellWrapperElement) {
cellWrapperElement.style.overflow = 'visible'
let editorContext = document.createElement("div")
editorContext.setAttribute("gcUIElement", "gcEditingInput");
let editor = document.createElement("div");
// 自定义单元格中 editorContext 作为容器，须要在创立一个 child 用于挂载，不能间接挂载到 editorContext 上
editorContext.appendChild(editor);
return editorContext;
}
AutoComplateCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
let width = cellRect.width > 180 ? cellRect.width : 180;
if (editorContext) {
// 动态创建 VUE 组件并挂载到 editor
const AutoCompleteComponent = {props: ['text','cellStyle'],
template: `<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>`,
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);
}
}
};
// create component constructor
const AutoCompleteCtor = Vue.extend(AutoCompleteComponent);
this.vm = new AutoCompleteCtor({
propsData: {cellStyle: {width: width+"px"}
}
}).$mount(editorContext.firstChild);
}
return editorContext;
};
AutoComplateCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {
// 给定一个最小编辑区域大小
let width = cellRect.width > 180 ? cellRect.width : 180;
let height = cellRect.height > 40 ? cellRect.height : 40;
return {width: width, height: height};
};
AutoComplateCellType.prototype.getEditorValue = function (editorContext) {
// 设置组件默认值
if (this.vm) {return this.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};
成果如图：
一个完满的单元格新鲜出炉~
这里介绍的形式只是诸多实现计划的一种。如果大家有其余更好的想法办法，欢送一起探讨 ~
如果你对其余更多前端电子表格中乏味性能感兴趣，能够查看 SpreadJS 更多实例演示 。
咱们也会在之后，继续为大家带来更多带来更多庄重和乏味的内容 ~