vue+handsontable页面表格插件

1.安装：npm install handsontable @handsontable/vue

2.开始使用：

import Handsontable from 'handsontable'
import {HotTable} from '@handsontable/vue';

<template>
  <div>
    <HotTable key="t2" ref="table" :data="data" :settings="hotSettings"></HotTable>
  </div>
</template>

export default {
  name: 'App',
  components: {
    HotTable
  },

data() {
  return {
    data: [[]],
    hotSettings: {
      minCols: 3,
      minRows: 3,
      className: "htCenter htMiddle",
      selectionMode: 'single',
      manualRowResize: true,
      manualColumnResize: true,
      colHeaders: true,
      rowHeaders: true,
      language: 'zh-CN',
      mergeCells: true,
      // copyPaste: true,
      colWidths: 100,
      autoWrapRow: true,
      rowHeights: 30,
     //对td的渲染
      cells: function (row, column, prop) {
        let cellProp = {};
        let value;
        if (value) {
          //自定义你的td的renderer
          cellProp.renderer = yourcellrenderer;
          //定义td编辑方式，具体参见官方文档，false为不能编辑，但是键盘删除和复制粘贴是可用的
          if (value.type) {
            cellProp.editor = false;
          } else {
            cellProp.editor = 'text';
          }
        }
        return cellProp   //return 出来含有固定参数的对象，覆盖默认的配置
      },
      afterChange: function (changes, sources) {
        console.log(changes, sources)  // changes为数组数据改变后的坐标（row,col），sources改变的类型(具体参见文档)
      },
      contextMenu: {
        items: {
           //插入删除行和列，撤销重做等
          'row_above': {},
          'col_left': {},
          'remove_row': {},
          'remove_col': {},
          'undo': {},
          'redo': {},
          '---------': {},

          'yourContextMenuItem': {
            name: '自定义右键菜单项',
            disabled: function () {
               //是否禁用
               return false
            },
            callback: function () {
              //点击菜单的回调
            }
          },
          
          },
        }
      }
    },
  }
}}

3.获取table里面的数据：即和table绑定的data

4.获取合并的单元格数据：

let mergeData=this.$refs.table.hotInstance.getPlugin('MergeCells').mergedCellsCollection.mergedCells;

5.热加载data 或者 设置项：

this.$refs.table.hotInstance.loadData(this.data);

this.$refs.table.hotInstance.updateSettings({mergeCells: mergeData});

6.语言切换：

 import 'handsontable/languages'

   在hotSetting中添加

  language: 'zh-CN'，