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

作为近五年都冲在热门框架排行榜首的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'