Vue.js 中初始化 Handsontable

怼烎@ 2023-02-17 08:56 21阅读 0赞

### 这里写目录标题 ###

*   *  初始化 Handsontable
     *   *  安装 Handsontable
         *  新建 Vue 模板 Table.vue
         *  导入Handsontable，填充 20x20 的表格数据
         *  路由
         *  测试

## 初始化 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

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

[2020061311595576.png]: https://img-blog.csdnimg.cn/2020061311595576.png