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

发布于 2022-09-06 20:42:24 字数 1183 浏览 35 评论 0

在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中使用这个方法,不知道怎么才能调用,麻烦研究过这块的同学帮忙解答一下,不甚感激!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

つ可否回来 2022-09-13 20:42:24

我找到了一个方法,可以使用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就是当前的表格的对象
        console.log(this.$refs.hotTable.table)
      }
    }
    components: {
      HotTable
    }
  }
</script>
白衬杉格子梦 2022-09-13 20:42:24

vue1.0怎么破

静水深流 2022-09-13 20:42:24

楼主解决没有?有搜索及分页的例子么?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文