handsontable 在vue中使用

最新推荐文章于 2024-08-12 08:27:11 发布

wlm_0214

最新推荐文章于 2024-08-12 08:27:11 发布

阅读量1.7k

点赞数 1

分类专栏： js 文章标签： vue

本文链接：https://blog.youkuaiyun.com/wlm_0214/article/details/106859060

版权

js 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了在Vue项目中如何安装并使用Handsontable。通过npm安装handsontable-pro和@handsontable-pro/vue，同时也自动安装了相关依赖如moment、numbro等。在页面中，可以方便地import引入Handsontable的模块方法，直接应用于项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装

1.npm install handsontable-pro @handsontable-pro/vue

2.npm install handsontable @handsontable/vue

这样安装完handsontable依赖的各模块（moment、numbro、pikaday 、zeroclipboard）也一起安装完了，不必再单独安装

页面如果使用相关的模块方法，可以直接import引入，如：

页面直接上代码：

<template>
  <div id="hot-preview">
    <HotTable :root="root" ref="testHot" :settings="hotSettings"></HotTable>
  </div>
</template>

<script>
  import { HotTable } from '@handsontable-pro/vue'
  import "handsontable/dist/handsontable.full.css"
  import Handsontable from 'handsontable-pro'

  export default {
    components: {
      HotTable
    },
    data: function() {
      return {
        root: 'test-hot',
        hotSettings:{
          data:[
            [false,'20080101', 10, 11, 12, 13,true],
            [false,'20090101', 20, 11, 14, 13,true],
          ],
          rowHeaders: true,
          colHeaders: true,
          colHeaders: ['选择','题目', 'A选项', 'B选项', 'C选项', 'D选项','答案'],          
          rowHeaders: [1,2],
          contextMenu: true,
          contextMenu:{
            items:{
                // "row_above": {
                //   name:'上方插入一行'
                // },
                // "row_below": {
                //   name:'下方插入一行'
                // },
                "col_left": {
                  name:'左方插入列'
                },
                "col_right": {
                  name:'右方插入列'
                },
                "hsep1": "---------", //提供分隔线
                "remove_row": {
                  name: '删除行',
                },
                "remove_col": {
                  name: '删除列',
                },
                "hsep2": "---------",
            }
          },
        }
        
        
      };
    },
    methods:{
            //TODO
    }
  }
</script>