Vue项目中使用Handsontable

需求： 页面中表格要做成可编辑功能，要求在页面中可以像在Excel表格中一样可进行复制、粘贴、添加、删除等操作，可以将Excel表格中的内容通过一次复制就能全部粘贴到页面表格中。

Handsontable常用功能实例：

• Handsontable添加操作按钮
• Handsontable自定义格式校验

Handsontable介绍： Handsontable是一个具有电子表格功能和外观的数据网格。Handsontable是用JavaScript编写的，适用于最流行的框架，如Angular，Vue和React。可以使用自定义插件轻松修改或扩展它。它使用JSON格式绑定到任何数据源并处理大量记录。它支持过滤，排序和CRUD （创建，读取，更新，删除）和高级操作（多列排序，创建自定义单元格类型和添加数据摘要）等操作。

关于获取许可证： 如果直接引用，会导致表格下方有一行提示：

要添加一行非商用声明，我们可以在设置对象setting中输入以下键值对：

licenseKey: "non-commercial-and-evaluation"

安装插件：

npm install @handsontable/vue handsontable

引入插件和样式：

import { HotTable } from '@handsontable/vue';
import 'handsontable/dist/handsontable.full.css';

具体的使用方法和主要参数说明：

<template>
  <div>
    <Card>
        <Form ref="setForm" :model="setForm" :rules="setRule">
            <FormItem label="目标设定：（列表支持批量复制粘贴，没有值时请空着）" class="hotTable">
                <hot-table id="hot" :settings="goalHotSettings"></hot-table>
            </FormItem>
        </Form>
    </Card>
  </div>
</template>

<script>
import { HotTable } from '@handsontable/vue';
import 'handsontable/dist/handsontable.full.css';
export default {
name:"setTarget",
components: {
  HotTable
},
props: {},
data() {
  return {
      setForm: {
          period: true,
          object:'',
          targetTableData: [],
          completeTableData: []
      },
      goalHotSettings: {
        data: [  // 表格数据
          {
              object: '一级架构',
              organization: 'aaa',
              JanGoal: 100,
              action: '删除'
          },
          {
              object: '二级架构',
              organization: 'bbb',
              JanGoal: 100,
              action: '删除'
          },
          {
              object: '三级架构',
              organization: 'ccc',
              JanGoal: 100,
              action: '删除'
          },
          {
              object: '四级架构',
              organization: 'ddd',
              JanGoal: 100,
              action: '删除'
          }
        ],
        columns: [  // 每一列对应的数据和数据类型
        	{
                data: 'action',
                type: 'text',
            },
            {
                data: 'object',
                type: 'text'
            },
            {
                data: 'organization',
                type: 'text'
            },
            {
                data: 'JanGoal',
                type: 'numeric'
            },
            {
                data: 'FebGoal',
                type: 'numeric'
            },
            {
                data: 'MarGoal',
                type: 'numeric'
            },
            {
                data: 'AprGoal',
                type: 'numeric'
            },
            {
                data: 'MayGoal',
                type: 'numeric'
            },
            {
                data: 'JunGoal',
                type: 'numeric'
            },
            {
                data: 'JulGoal',
                type: 'numeric'
            },
            {
                data: 'AugGoal',
                type: 'numeric'
            },
            {
                data: 'SepGoal',
                type: 'numeric'
            },
            {
                data: 'OctGoal',
                type: 'numeric'
            },
            {
                data: 'NovGoal',
                type: 'numeric'
            },
            {
                data: 'DesGoal',
                type: 'numeric'
            }
        ],
        colHeaders: [  // 显示列头，为true时显示默认，为数组时，显示数组里面的值
        	'操作',
            '对象',
            '对象所属上级组织',
            '1月目标',
            '2月目标',
            '3月目标',
            '4月目标',
            '5月目标',
            '6月目标',
            '7月目标',
            '8月目标',
            '9月目标',
            '10月目标',
            '11月目标',
            '12月目标'
        ],
        // cell: [ ]   // 设置指定单元格的一些属性，比如是否可编辑，定义className
        cells: function(row, column, prop) { // 动态设置一些单元格的属性
          const cellProperties = {readOnly: false, className: ''};
          const visualRowIndex = this.instance.toVisualRow(row);
          const visualColIndex = this.instance.toVisualColumn(column);
          if(visualColIndex === 0 || visualColIndex === 1) {
            cellProperties.readOnly = true;
            cellProperties.className = 'forbidden';
          }
          return cellProperties;
        },
        fixedRowsTop: 1,  // 固定顶部多少行不能垂直滚动
        fixedColumnsLeft: 2, // 固定左侧多少列不能水平滚动
        stretchH: 'all', // last/all/none last为延伸最后一列，all为延伸所有列，none表示默认不延伸
        autoWrapRow: true, // 自动隐藏行
        height: 487, // 高度
        manualRowResize: true, // 允许拖动改变行的高度
        manualColumnResize: true, // 允许拖动改变列的宽度
        rowHeaders: false, // 当值为true时显示行头，当值为数组时，行头为数组的值
        manualRowMove: false, // 为true时，行可拖拽至指定行
        manualColumnMove: false,  // 为true时，列可拖拽至指定列
        contextMenu: true, // 右键菜单展示
        filters: false, // 过滤
        dropdownMenu: false, // 下拉菜单
        licenseKey: "non-commercial-and-evaluation"  // 非商业用途声明
      }
  };
},
created() {},
mounted() {},
activited() {},
update() {},
beforeRouteUpdate() {},
methods: {
},
filter: {},
computed: {},
watch: {},
};
</script>
<style lang="less">
.hotTable {
  #hot {
    height: auto !important;
    width: 100% !important;
    .wtHolder {
      height: auto !important;
      width: 100% !important;
    }
    .forbidden {
      background-color: #f0f0f0;
    }
  }
}
</style>