鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ Vue表格組件vue-handsontable-official怎么使用hand

Vue表格組件vue-handsontable-official怎么使用handsontable(js版本)中的方法

在vue中使用了表格組件handsontable的vue版本vue-handsontable-official,但是大多數(shù)時候都會使用到原始版本的一些方法，但是在原始版本中會創(chuàng)建handsontable對象，通過對象調(diào)用方法，但是在vue版本中，handsontable是作為一個組件的，沒有創(chuàng)建它的對象，這時候我應(yīng)該怎么調(diào)用它本身的方法呢？

原始版本的使用示例：

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>

上面的例子是在原始版本中調(diào)用它本身的一個方法，選中指定的單元格。但是我想在vue中使用這個方法，不知道怎么才能調(diào)用，麻煩研究過這塊的同學(xué)幫忙解答一下，不甚感激！

回答
編輯回答
孤影

vue1.0怎么破

2017年7月14日 13:26
編輯回答
哎呦喂

我找到了一個方法，可以使用vue的ref屬性綁定對象。
示例：

<template>
  <div id="hot-preview">
    <HotTable :root="root" ref="testHot" :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
        }
      };
    },
    methods:{
      testFunc:function(){
        //this.$refs.hotTable.table就是當(dāng)前的表格的對象
        console.log(this.$refs.hotTable.table)
      }
    }
    components: {
      HotTable
    }
  }
</script>
2018年8月16日 04:47
編輯回答
離夢

樓主解決沒有？有搜索及分頁的例子么？

2017年5月18日 01:02