Vue.js 中初始化 Handsontable

初始化 Handsontable

安装 Handsontable

Handsontable提供了 Vue.js 的封装，使用以下命令安装 Handsontable。

npm install handsontable @handsontable/vue

新建 Vue 模板 Table.vue

 touch resources/js/pages/Table.vue

导入Handsontable，填充 20x20 的表格数据

<template >
    <div >
        <div id="hotTable" class="hotTable">
            <HotTable :root="root" ref="hypercell" :settings="hotSettings" ></HotTable>
        </div>
    </div>
</template>


<script>
    import {
    
     HotTable } from '@handsontable/vue'
    import 'handsontable/dist/handsontable.full.css'
    import Handsontable from 'handsontable'
    import "handsontable/languages/zh-CN";
    import {
    
     EventBus } from '../event-bus.js';
    import {
    
     HYPERCELL_CONFIG } from '../config';
    export default {
    
    
        name: 'Table.vue',
        data: function() {
    
    
            return {
    
    
                root: 'table-hot',
                hotRef:null,
                hotSettings:{
    
    
                    //表格数据
                    data: Handsontable.helper.createSpreadsheetData(20, 20),
                    //表格整体宽度
                    width: '100%',
                    //行表头
                    rowHeaders: true,
                    //列表头
                    colHeaders: true,
                    //合并单元格
                    mergeCells: true,
                    //单元格属性
                    cell:[],
                    //右键菜单
                    contextMenu: true,
                    //自动拉伸
                    stretchH: 'all',
                    autoWrapRow: true,
                    //下拉菜单
                    dropdownMenu: true,
                    columnSorting: {
    
    
                        indicator: true
                    },
                    autoColumnSize: {
    
    
                        samplingRatio: 23
                    },
                    //默认语言
                    language: "zh-CN",
                    //默认对齐方式
                    className: "htCenter htMiddle",
                    //许可证
                    licenseKey: 'ab3e4-1bee8-ed01c-4d94b-08cfe',
                    //导出文件插件
                    exportFile: true,
                    //公式插件
                    formulas:true,
                    //评论插件
                    comments:true,
                    // minSpareRows:40,
                    // minSpareCols:10,
                    // manualRowResize: true,
                    // manualColumnResize: true,
                    // manualColumnMove: true,
                    // manualRowMove: true,
                },
            };
        },
        components: {
    
    
            HotTable,HYPERCELL_CONFIG
        },
        mounted() {
    
    
            this.hotRef = this.$refs.hypercell.hotInstance;
        }
    }
</script>

路由

resources/js/routes.js

{
    
    
    path: 'table/:table?',
    name: 'Table',
    components: Vue.component( 'Profile', require( './pages/Table' ) ),
},

?表示这是一个可选参数，有table参数时代表编辑表格，没有table参数时代表创建表格。

测试

npm run dev

仅需这些配置，我们就可以使用 Handsontable 的基本功能了，但是这些数据和用户的操作都是保存在客户端的，要想同步到后端是个繁杂的过程。首先 Handsontable 是一家国外网站，国内基本打不开官网，而且没有中文文档，如果英文水平不够阅读起来会很吃力。