Vue和Jexcel事件和计算字段

Question

我正在使用jexcel的vue包装器，并尝试从工具栏计算字段触发撤消函数。我似乎无法访问电子表格的实例。它会抛出一个this.undo is undefined错误

<template lang="html">   
  <div class="wrapper-jexcel">
    <button class="" @click="getData(jExcelObj)">Data</button> 
     <button class="" @click="jExcelObj.undo()">Undo</button> 
    <input
      type="button"
      value="Add new row"
      @click="jExcelObj.insertRow()"
    />
    <div id="spreadsheet" ref="spreadsheet"></div>
  </div>
</template>

import jexcelStyle from "jexcel/dist/jexcel.css"; // eslint-disable-line no-unused-vars
import jexcel from "jexcel"; // eslint-disable-line no-unused-vars
import db from '@/firebase/init'
import firebase from 'firebase'

export default {
  name: "workbook",
  data() {
    return {
      workbookid: this.$route.params.workbookid,
      myCars: [],
      columns: [
        { type: "text", title: "Car", width: "120px" },
        {
          type: "dropdown",
          title: "Make",
          width: "250px",
          source: ["Alfa Romeo", "Audi", "BMW", "Honda", "Porshe"]
        },
        { type: "calendar", title: "Available", width: "250px" },
        { type: "image", title: "Photo", width: "120px" },
        { type: "checkbox", title: "Stock", width: "80px" },
        {
          type: "numeric",
          title: "Price",
          width: "120px",
          mask: "$ #.##,00",
          decimal: ","
        },
        { type: "color", width: "100px", render: "square" }
      ]
    };
  },created() {
    this.getworkbook()
  },

  methods: {
    onchange(){
      console.log('change');
    },
    insertRowc() {
      console.log(this);
      // this.spreadsheet.insertRow();
    },
    undo(){
      console.log('test');
        jExcelObj.undo();
    },

 getData(payload) { 
   console.log(this.myCars);
   console.log(payload);
  // this.myCars = payload.data
 }
  },
  computed: {
    jExcelOptions() {
      var self = this;
      return {
        data: this.myCars,
        columns: this.columns,
        search: true,
        //fullscreen: true,
        minDimensions: [20, 40],
        defaultColWidth: 100,
        allowComments: true,
        toolbar: [

              { type:'i', content:'undo', onclick:function() { return jExcelObj.undo(); } },
        { type:'i', content:'redo', onclick:function() { this.redo(); } },
        { type:'i', content:'save', onclick:function () { test.download(); } },
        { type:'select', k:'font-family', v:['Arial','Verdana'] },
        { type:'select', k:'font-size', v:['9px','10px','11px','12px','13px','14px','15px','16px','17px','18px','19px','20px'] },
        { type:'i', content:'format_align_left', k:'text-align', v:'left' },
        { type:'i', content:'format_align_center', k:'text-align', v:'center' },
        { type:'i', content:'format_align_right', k:'text-align', v:'right' },
        { type:'i', content:'format_bold', k:'font-weight', v:'bold' },
        { type:'color', content:'format_color_text', k:'color' },
        { type:'color', content:'format_color_fill', k:'background-color' },
        ]
      };
    }
  },
  mounted: function() {
    //console.log(this.jExcelOptions);
    //console.log(this.$refs["spreadsheet"]);
    const jExcelObj = jexcel(this.$refs["spreadsheet"], this.jExcelOptions);
    // Object.assign(this, jExcelObj); // pollutes component instance
    Object.assign(this, { jExcelObj }); // tucks all methods under jExcelObj object in component instance
    // console.log(this.jExcelObj);
  }
};

我是否应该将实例传递给computed方法？我正在努力理解如何管理包装器插件的实例和访问方法。

Answer 1

您可以使用以下命令获取实例：

var yourTableInstance = document.getElementById('spreadsheet').jexcel;

yourTableInstance.undo();
yourTableInstance.getData();