Vue表格组件vue-handsontable-official怎么使用handsontable

Question

在vue中使用了表格组件handsontable的vue版本vue-handsontable-official,但是大多数时候都会使用到原始版本的一些方法，但是在原始版本中会创建handsontable对象，通过对象调用方法，但是在vue版本中，handsontable是作为一个组件的，没有创建它的对象，这时候我应该怎么调用它本身的方法呢？

原始版本的使用示例：

hot = Handsontable(document.getElementById('example1'), {

    data: data,

    minRows: 5,

    minCols: 6,

    currentRowClassName: 'currentRow',

    currentColClassName: 'currentCol',

    rowHeaders: true,

    colHeaders: true,

    selectCell:selectCell1

  });

  hot.selectCell(1,2,3,4);

vue的使用示例：

<template>

  <div id="hot-preview">

    <HotTable :root="root" :settings="hotSettings"></HotTable>

  </div>

</template>

<script>

  import HotTable from 'vue-handsontable-official';

  export default {

    data: function() {

      return {

        root: 'test-hot',

        hotSettings: {

          data: [['sample', 'data']],

          colHeaders: true

        }

      };

    },

    components: {

      HotTable

    }

  }

</script>

上面的例子是在原始版本中调用它本身的一个方法，选中指定的单元格。但是我想在vue中使用这个方法，不知道怎么才能调用，麻烦研究过这块的同学帮忙解答一下，不甚感激！

Answer 1

我找到了一个方法，可以使用vue的ref属性绑定对象。示例：<template>&nbsp; <div id="hot-preview">&nbsp; &nbsp; <HotTable :root="root" ref="testHot" :settings="hotSettings"></HotTable>&nbsp; </div></template><script>&nbsp; import HotTable from 'vue-handsontable-official';&nbsp; export default {&nbsp; &nbsp; data: function() {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; root: 'test-hot',&nbsp; &nbsp; &nbsp; &nbsp; hotSettings: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [['sample', 'data']],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; colHeaders: true&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; },&nbsp; &nbsp; methods:{&nbsp; &nbsp; &nbsp; testFunc:function(){&nbsp; &nbsp; &nbsp; &nbsp; //this.$refs.hotTable.table就是当前的表格的对象&nbsp; &nbsp; &nbsp; &nbsp; console.log(this.$refs.hotTable.table)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; components: {&nbsp; &nbsp; &nbsp; HotTable&nbsp; &nbsp; }&nbsp; }</script>