@handsontablepro/vue简单Demo

主要代码

<template>
  <div id="hot-preview" ref="testHota">
    <div class="top">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="danger" @click="del">删除</el-button>
      <el-button @click="clear">清空</el-button>
    </div>
    <HotTable ref="hottable" :data='tabledata' :root="root" :settings="hotSettings"></HotTable>
  </div>
</template>

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

export default {
  data: function() {
    // let that = this
    return {
      root: 'test-hot',
      tabledata: [        //数据可以是二维数组，也可以是数组对象
        [false, '20080101', 10, 11, 12, 13, ['查看 修改 提交EOA 删除']],
        [false, '20090101', 20, 11, 14, 13, true],
        [false, '20010101', 30, 15, 12, 13, true],
        [false, '20010101', 42, 213, 21, 312, true],
        [false, '20010201', 52, 213, 21, 312, true],
        [false, '20010301', 62, 213, 21, 312, true],
        [false, '20010401', 72, 213, 21, 312, true],
        [false, '20010501', 82, 213, 21, 312, true],
        [false, '20010601', 92, 213, 21, 312, true]
      ],
      hotSettings: {
        // data: [['sample', 'data']],
        // colHeaders: true,
        // rowHeaders: ['ID', 'Name', 'Address'], // 每行的标题，如果不够，则用大写字母补充
        startRows: 10,//行列范围
        startCols: 6,
        // minRows: 5,  //最小行列 影响删除行
        minCols: 5,
        // maxRows: 20,  //最大行列
        maxCols: 20,
        rowHeaders: true,//行表头，可以使布尔值（行序号），可以使字符串（左侧行表头相同显示内容，可以解析html），也可以是数组（左侧行表头单独显示内容）。
        colHeaders: ['选择', '题目', 'A选项', 'B选项', 'C选项', 'D选项', '操作',],//自定义列表头or 布尔值
        // copyPaste: true,
        copyPaste: {
          columnsLimit: 25,
          rowsLimit: 50,
          pasteMode: 'shift_down',
          uiContainer: document.body,
        },
        minSpareCols: 2, //列留白
        // minSpareRows: 2,//行留白
        // currentRowClassName: 'currentRow', //为选中行添加类名，可以更改样式
        // currentColClassName: 'currentCol',//为选中列添加类名
        autoWrapRow: true, //自动换行
        // hiddenRows: { // 隐藏行
        //   rows: [0, 1],
        //   indicators: false, // 官网说必须为true 才会隐藏，然而实际上并不是
        //   copyPasteEnabled: false // 为false 时跳过复制
        // },
        contextMenu: {
          items: {
            "row_above": {
              name: '上方插入一行'
            },
            "row_below": {
              name: '下方插入一行'
            },
            "col_left": {
              name: '左方插入列'
            },
            "col_right": {
              name: '右方插入列'
            },
            "hsep1": "---------", //提供分隔线
            "remove_row": {
              name: '删除行',
            },
            "remove_col": {
              name: '删除列',
            },
            "make_read_only": {
              name: '只读',
            },
            "borders": {
              name: '表格线'
            },
            "copy": {
              name: '复制'
            },
            // "paste": {
            //   name: '粘贴',
            //   callback: function() {
            //     let me = that.$refs.testHota
            //     console.log(me, that);
            //     var plugin = me.getPlugin('copyPaste');
            //     me.listen();
            //     plugin.paste(11);
            //     console.log("paste回调")
            //   }
            // },
            "cut": {
              name: '剪切'
            },
            "commentsAddEdit": {
              name: '添加备注',
            },
            "commentsRemove": {
              name: '取消备注',
            },
            "freeze_column": {
              name: '固定列',
            },
            "unfreeze_column": {
              name: '取消列固定',
            },
            "undo": { name: "撤销" },
            "redo": { name: "恢复" },
            "hsep2": "---------",
          }
        },
        manualColumnFreeze: true, //手动固定列  ?
        manualColumnMove: true, //手动移动列
        manualRowMove: true,   //手动移动行
        manualColumnResize: true,//手工更改列距
        manualRowResize: true,//手动更改行距
        comments: true, //添加注释  ?
        cell: [  //???
          { row: 1, col: 1, comment: { value: 'this is test' } },
        ],
        customBorders: [],//添加边框
        columnSorting: true,//排序
        stretchH: 'all',//根据宽度横向扩展，last:只扩展最后一列，none：默认不扩展
        fillHandle: true, //选中拖拽复制 possible values: true, false, "horizontal", "vertical"
        fixedColumnsLeft: 2,//固定左边列数
        // fixedRowsTop: 2,//固定上边列数
        mergeCells: [   //合并
          // {row: 1, col: 1, rowspan: 3, colspan: 3},  //指定合并，从（1,1）开始行3列3合并成一格
          // {row: 3, col: 4, rowspan: 2, colspan: 2}
        ],
        columns: [     //添加每一列的数据类型和一些配置
          { type: 'checkbox' },  //多选框
          {
            type: 'date',   //时间格式
            dateFormat: 'YYYY-MM-DD',
            correctFormat: true,
            defaultDate: '19000101'
          },
          {
            type: 'dropdown', //下拉选择
            source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
            strict: false   //是否严格匹配
          },
          { type: 'numeric' },  //数值
          {
            type: 'numeric',
            readOnly: true  //设置只读
          },
          {
            type: 'numeric',
            format: '$ 0,0.00'
          },  //指定的数据格式
          {},

        ],
      }
    };
  },
  mounted() {
    this.$refs.hottable.hotInstance.addHook('afterOnCellMouseDown', this.cellClick)
  },
  methods: {
    cellClick(a, b) {
      this.tabledata[b.row][0] = !this.tabledata[b.row][0]
      this.$refs.hottable.hotInstance.loadData(this.tabledata)
    },
    add() {
      this.$refs.hottable.hotInstance.alter('insert_row')
    },
    del() {
      let arr = JSON.parse(JSON.stringify(this.tabledata))
      let delcount = 0
      for (let i = 0; i < arr.length; i++) {
        if (arr[i][0]) {
          this.$refs.hottable.hotInstance.alter('remove_row', i - (delcount++))
        }
        if (!this.tabledata.length) {
          this.$refs.hottable.hotInstance.alter('insert_row')
        }
      }
    },
    clear() {
      let me = this
      this.tabledata = [[]]
      this.$nextTick(() => {
        me.tabledata = [[false]]
      })
    }
  },
  components: {
    HotTable
  }
}
</script>

<style scoped>
.top {
  margin: 20px;
}
</style>

源代码：https://github.com/wwj070/handsontable-pro-vue