快捷導(dǎo)航

教你如何使用VUE組件創(chuàng)建SpreadJS自定義單元格

更新時(shí)間：2022年01月07日 11:41:09 作者：葡萄城技術(shù)團(tuán)隊(duì)

這篇文章主要介紹了使用VUE組件創(chuàng)建SpreadJS自定義單元格的方法，通常我們使用組件的方式是，在實(shí)例化Vue對(duì)象之前，通過Vue.component方法來注冊(cè)全局的組件,文中通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧

SpreadJS純前端表格控件是基于HTML5的Java電子表格和網(wǎng)格功能控件，適用于.NET、Java和移動(dòng)端等各平臺(tái)在線編輯類Excel功能的表格程序開發(fā)。

本文介紹了如何使用VUE組件創(chuàng)建SpreadJS自定義單元格功能。

作為近五年都沖在熱門框架排行榜首的Vue，大家一定會(huì)學(xué)到的一部分就是組件的使用。前端開發(fā)的模塊化，可以讓代碼邏輯更加簡單清晰，項(xiàng)目的擴(kuò)展性大大加強(qiáng)。對(duì)于Vue而言，模塊化的體現(xiàn)集中在組件之上，以組件為單位實(shí)現(xiàn)模塊化。

通常我們使用組件的方式是，在實(shí)例化Vue對(duì)象之前，通過Vue.component方法來注冊(cè)全局的組件。

// 告訴Vue，現(xiàn)在需要組件 todo-item，配置如下，包含props和template
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
}) 
// 實(shí)例化一個(gè)Vue對(duì)象，掛載在#app-7元素下，定它的屬性，數(shù)組groceryList 
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: 'Vegetables' },
      { text: 'Cheese' },
      { text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

在眾多組件之中，作為辦公必備的電子表格，在前端組件中也占據(jù)了重要地位。除了以表格的形式展示數(shù)據(jù)，電子表格還有一個(gè)非常重要的功能，即支持自定義功能拓展和各種定制化的數(shù)據(jù)展示效果，比如checkbox，Radio button等；還需要實(shí)現(xiàn)當(dāng)單元格進(jìn)入編輯狀態(tài)時(shí)，使用下拉菜單（或其他輸入控件）輸入的效果。我們稱之為"自定義單元格"，一種嵌入組件內(nèi)的組件。SpreadJS目前擁有8種下拉列表，在打開列表之前，我們只需要在單元格樣式中設(shè)置選項(xiàng)數(shù)據(jù)。你可以參考以下代碼使用列表：

在線體驗(yàn)地址

// 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"});

前端電子表格固然好用，但由于框架生命周期以及自定義單元格渲染邏輯的問題，目前的技術(shù)手段無法直接在框架頁面下直接通過template的方式使用框架下的組件。在之前的內(nèi)容中，我們提到了可以使用Svelte使用Web Conmponents封裝其他組件可以使用的組件。
除了上面提到的方法之外，我們?nèi)绻朐赩ue環(huán)境下使用自定義單元格，可以考慮使用持動(dòng)態(tài)渲染的方式來創(chuàng)建和掛載組件，從而將組件注入自定義單元格。

下面為大家演演示如何在VUE項(xiàng)目中，創(chuàng)建一個(gè)使用VUE 組件的自定義單元格。

實(shí)踐

首先，在項(xiàng)目中開啟運(yùn)行時(shí)加載，在vue.config.js中添加runtimeCompiler: true。

module.exports = {
        devServer: {
            port: 3000
        },
        <font color="#ff0000">runtimeCompiler: true</font>
      }

引用ElementUI，需要注意要把element 的css引用放在APP import前，這樣修改樣式，才能覆蓋原有項(xiàng)目內(nèi)容。

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

創(chuàng)建AutoComplateCellType，具體代碼如下，需要注意幾點(diǎn)。
1、自定義的元素，需要添加gcUIElement屬性，如果元素或者其父元素沒有該屬性，點(diǎn)擊創(chuàng)建的組件便會(huì)直接退出編輯狀態(tài)無法編輯。
對(duì)于ElementUI 的autocomplete，默認(rèn)下拉選項(xiàng)內(nèi)容是注入到body中的，需要給組件模板中設(shè)置:popper-append-to-body="false"，讓彈出的下拉選項(xiàng)在gcUIElement的Div中渲染。
如果使用其他組件沒有類似選項(xiàng)，也可以跟進(jìn)實(shí)際情況在彈出時(shí)在添加gcUIElement屬性。
2、使用動(dòng)態(tài)掛載組件的 this.vm 設(shè)置和獲取單元格的值。
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作為容器，需要在創(chuàng)建一個(gè)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) {
        
        // 動(dòng)態(tài)創(chuàng)建VUE 組件并掛載到editor
        const AutoCompleteComponent = {
            props: ['text','cellStyle'],
            template: `<div>
                        <el-autocomplete
                        :style="cellStyle"
                        popper-class="my-autocomplete"
                        v-model="text"
                        :fetch-suggestions="querySearch"
                        placeholder="請(qǐng)輸入內(nèi)容"
                        :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;
                    // 無法設(shè)置動(dòng)態(tài)內(nèi)容的位置，可以動(dòng)態(tài)添加gcUIElement
                    // setTimeout(() => {
                    //   let popDiv = document.getElementsByClassName("my-autocomplete")[0];
                    //   if(popDiv){
                    //     popDiv.setAttribute("gcUIElement", "gcEditingInput");
                    //   }
                    // }, 500);
                    // 調(diào)用 callback 返回建議列表的數(shù)據(jù)
                    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) {
    // 給定一個(gè)最小編輯區(qū)域大小
    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) {
    // 設(shè)置組件默認(rèn)值
    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};

效果如圖：